deborahk / angularf2bwebapi

Files for the "Angular Front to Back With Web API" Pluralsight course by Deborah Kurata.

Hi there 👋

🔎 Where to find me:

• YouTube
• Twitter
• Mastodon
• freecodecamp.org

🔭 I’ve published FREE courses on YouTube:

Gentle Introduction to Programming for Beginners (14 lessons)

Gentle Introduction to HTML for Beginners (21 lessons)

Gentle Introduction to GitHub for Beginners (21 lessons)

Gentle Introduction to CSS for Beginners (22 lessons)

Gentle Introduction to Bootstrap for Beginners (14 lessons)

Gentle Introduction to JavaScript for Beginners (17 lessons)

angularf2bwebapi's Issues

Error: [ng:areq] Argument 'ProductListCtrl' is not a function, got undefined

Can you please help me in resolving this issue?
Please find the files attached for the code.

Index.html

<title>Acme Product Management</title>

<!-- Style sheets -->
<link href="Content/bootstrap.css" rel="stylesheet" />

Acme Product Management

<div class="container">
    <div ng-include="'app/products/productListView.html'"></div>
</div>

<!-- Library Scripts -->
<script src="scripts/angular.js"></script>
 <script src="Scripts/angular-resource.js"></script>

<!-- Application Script -->
<script src="app/app.js"></script>

<!-- Services -->
<script src="common/common.services.js"></script>
<!-- Product Controllers -->
<script src="app/products/productListCtrl.js"></script>

# # app.js

var app = angular.module("productManagement",
["common.services"]);

common.services.js

angular
.module("common.services",
["ngResource"])
.constant("appSettings",
{
serverPath: "http://localhost:52396/"

});

productListCtrl.js

angular
.module("productManagement")
.controller("ProductListCtrl",
["productResource",
ProductListCtrl]);

function ProductListCtrl(productResource) {
    var vm = this;
    productResource.query(function (data) {
        vm.products = data;
    });
}

productResource.js

angular
.module("common.services")
.factory("productResource",
["$resource",
"appSettings",
productResource])

function productResource($resource, appSettings) {
return $resource(appSettings.serverPath + "/api/products/:id");

}

unable to access the controller(typescript & angularjs) in jasmine

angularjs && Typescript Controller

module app.controller {
class MainCtrl {
static $inject = ['$scope', '$rootScope', '$interval', '$http', 'unityService',
'adalAuthenticationService', '$location', '$window', 'analyticsService', 'homePageSetting',
'unityCommonService', '$timeout', '$cookies', '$routeParams', '$compile', '$filter'];
}
constructor(
private $scope,
private $rootScope,
private $interval,
private $http,
private unityService: app.services.unityService,
private adalAuthenticationService,
private $location,
private $window,
private analyticsService,
private homePageSetting,
private unityCommonService,
private $timeout,
private $cookies,
private $routeParams,
private $compile,
private $filter

    ) { }

angular.module('UnityApp').controller('MainCtrl', MainCtrl);
}

Jasmine Test For Controller

beforeEach(function () { angular.module("UnityApp") });

it("should make a string more exciting", inject(function ($controller, $rootScope) {
var controller =
$controller('MainCtrl', {
$scope: $rootScope.$new(),
})

}));

i m unable to access the scope in MainCtrl

Error: [$injector:unpr] Unknown provider: appSettingsProvider <- appSettings <- productResource

I am having an issue with the above error. Following the course from the beginning and struck at CORS and Formatters.

Code base seems incomplete

I have reviewed the PluralSight course and when looking at this accompanying Git, it's missing a lot of the code from the course slides. Could you please update to include the latest version?

Unauthorized

Errors:

• Failed to load resource: the server responded with a status of 404 (Not Found)
• Failed to load resource: the server responded with a status of 401 (Unauthorized)

Everything was fine until start with currentUser.js

(function () {
"use strict";

angular
    .module("common.services")
    .factory("currentUser", currentUser)

function currentUser() {
    var profile = {
        isLoggedIn: false,
        username: "",
        token: ""
    };

    var setProfile = function (username, token) {
        profile.username = username;
        profile.token = token;
        profile.isLoggedIn = true;
    };

    var getProfile = function () {
        return profile;
    }

    return {
        setProfile: setProfile,
        getProfile: getProfile
    }
}

})();

maiCtrl.js:

(function () {
"use strict";

angular
.module("productManagement")
.controller("MainCtrl",
            ["userAccount",
             "currentUser",
               MainCtrl]);

function MainCtrl(userAccount, currentUser) {
    var vm = this;
    vm.isLoggedIn = function () {
        return currentUser.getProfile().isLoggedIn;
    };
    vm.userData = {
        userName: '',
        email: '',
        password: '',
        confirmPassword: ''
    };

    vm.registerUser = function () {
        vm.userData.confirmPassword = vm.userData.password;

        userAccount.registration.registerUser(vm.userData, function (data) {
            vm.confirmPassword = "";
            vm.message = "...Registration successful";
            vm.login();
        },
        function (response) {
            vm.isLoggedIn = false;
            vm.message = response.statusText + "\r\n";
            if (response.data.exceptionMessage) {
                vm.message += response.data.exceptionMessage;
            }

            if (response.data.modelState) {
                for (var key in response.data.modelState) {
                    vm.message += response.data.modelState[key] + "\r\n";
                }
            }
        });
    };

    vm.login = function () {
        vm.userData.grant_type = "password";
        vm.userData.userName = vm.userData.email;

        userAccount.login.loginUser(vm.userData,
            function (data) {
                vm.message = "";
                vm.password = "";
                currentUser.setProfile(vm.userData.userName, data.access_token);
            },
        function (response) {
            vm.password = "";
            vm.message = response.statusText + "\r\n";
            if (response.data.exceptionMessage) {
                vm.message += response.data.exceptionMessage;
            }

            if (response.data.error) {
                vm.message += response.data.error;
            }
        });
    };
}

})();

Thanks.

Argument 'ProductListCtrl' is not a function, got undefined

I've tried creating the app twice now and keep getting stuck tying to call the WebAPI. It isn't a CORS error. Instead I'm receiving the following error:

Error: [ng:areq] Argument 'ProductListCtrl' is not a function, got undefined

Angular points to this link for details about the error:
https://docs.angularjs.org/error/$injector/unpr?p0=productResourceProvider

Looking at Chrome Network, it doesn't look like it is even calling WebAPI:

Could you point me in the right direction to resolve? Thanks.

Josh.

External social logins

Dear Deborah!
Thanks for your interesting cources :-)

In this repository could be nice also to see External Login implementation as here http://bitoftech.net/2014/08/11/asp-net-web-api-2-external-logins-social-logins-facebook-google-angularjs-app/ but with internal ASP.NET posibilities, like

            app.UseTwitterAuthentication(
                consumerKey: "",
                consumerSecret: "");

Teste label:bug

Issue de teste.

Logout Issue

Hi Deborah, really appreciate your effort ... but i think you missed something very important to close this track ----> "Logout" it's really very important to me... should you add this part please

Files not present

The ProductRepository.cs and product.json files are not present in the APM.WebAPI project in the StartFiles directory.

Argument 'ProductListCtrl' is not a function, got undefined

I need some help in this:

I followed the same instructions in module 3 and I am getting this error:
Error: [ng:areq] Argument 'ProductListCtrl' is not a function, got undefined

here is my index.html

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Acm Product Management</title>

    <!-- Style sheets -->
    <link href="styles/bootstrap.css" rel="stylesheet" />
    <link rel="shortcut icon" href="">
</head>

<body ng-app="productManagement">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="navbar-brand">Acme Product Management</div>
            </div>
        </div>
    </nav>

    <div class="container">
        <div ng-include="'app/products/productListView.html'"></div>
    </div>

    <!-- Library Scripts -->
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-resource.js"></script>
    <script src="scripts/angular-mocks.js"></script>
    <script src="scripts/angular-route.js"></script>

    <!-- Application Script -->
    <script src="app/app.js"></script>

    <!-- Domain Classes -->

    <!-- Services -->

    <!-- Controllers -->
    <script src="app/products/productListCtrl.js" />
</body>

</html>

productListCtrl.js

var ProductListCtrl = (function () {
    function ProductListCtrl() {
        this.title = "product list";
        this.showImage = false;
        this.products = [
            {
                "productId": 1,
                "productName": "Leaf Rake",
                "productCode": "GDN-0011",
                "releaseDate": new Date(2009, 2, 19),
                "description": "Leaf rake with 48-inch wooden handle.",
                "price": 19.95,
                "imageUrl": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
            },
            {
                "productId": 2,
                "productName": "Garden Cart",
                "productCode": "GDN-0023",
                "releaseDate": new Date(2010, 2, 18),
                "description": "15 gallon capacity rolling garden cart",
                "price": 32.99,
                "imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
            },
            {
                "productId": 5,
                "productName": "Hammer",
                "productCode": "TBX-0048",
                "releaseDate": new Date(2013, 4, 21),
                "description": "Curved claw steel hammer",
                "price": 8.99,
                "imageUrl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
            }
        ];
    }
    return ProductListCtrl;
})();
angular.module("productManagement").controller("ProductListCtrl", ProductListCtrl);

app.js

angular.module("productManagement", []);

productListView.html

<div class="panel panel-primary"
     ng-controller="ProductListCtrl as vm">
    <div class="panel-heading"
         style="font-size:large">{{::vm.title}}
    </div>

    <div class="panel-body">
        <table class="table">

            <thead>
            <tr>
                <td>
                    <button type="button"
                            class="btn btn-primary"
                            ng-click="vm.toggleImage()">
                        {{vm.showImage ? "Hide" : "Show"}} Image
                    </button>
                </td>
                <td>Product</td>
                <td>Code</td>
                <td>Available</td>
                <td>Price</td>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="product in vm.products">
                <td>
                    <img ng-if="vm.showImage"
                         ng-src="{{product.imageUrl}}"
                         style="width:50px;margin:2px"
                         title="{{product.productName}}">
                </td>
                <td>{{ product.productName}} </td>
                <td>{{ product.productCode }}</td>
                <td>{{ product.releaseDate | date }}</td>
                <td>{{ product.price | currency }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

I can't figure out what's wrong, any help ?