danwahlin / customermanagerstandard

Customer Manager AngularJS/BreezeJS Application.

Customer Manager with AngularJS

If you’re new to AngularJS check out my AngularJS in 60-ish Minutes video tutorial or download the free eBook. Also check out The AngularJS Magazine for up-to-date information on using AngularJS to build Single Page Applications (SPAs).

Also check out my AngularJS JumpStart video course:

This is the standard Customer Manager application. To view a version of the application that has custom routing and dynamic controller script loading visit https://github.com/DanWahlin/CustomerManager. This application demonstrates:

• A complete application with read-only and editable data
• Using AngularJS with $http in a factory to access a backend RESTful service
• Using BreezeJS in a factory to access a backend RESTful Service
• Techniques for showing multiple views of data (card view and list view)
• Custom filters for filtering customer and product data
• A custom directive to ensure unique values in a form for email
• A custom directive that intercepts $http and jQuery XHR requests (in case either are used) and displays a loading dialog
• A custom directive that handles highlighting menu items automatically based upon the path navigated to by the user
• Form validation using AngularJS
• Provides login and authentication functionality (currently client-side only - plan to add server-side part too which is absolutely required in a "real" app)

The factories can be switched by changing the app/customersApp/services/config useBreeze setting to true.

The AngularJS portion of the app is structured using the following folders:

A related example that ties into Azure Active Directory Services and Office 365/SharePoint can be found here.

Requirements:

If you're using Visual Studio and .NET:

The following is required to support the backend services:

• Visual Studio 2015 Community (free version) - https://www.visualstudio.com/?WT.mc_id=m365-0000-dwahlin

• ASP.NET MVC and Web API are used for the back-end services along with Entity Framework for database access (included if you have VS 2015 community installed with the LocalDB option selected)

To get started, double-click the CustomerManager.sln file located at the root of the CustomerManager repository. Once the solution loads press F5 to run the project.

Note: If you want to use Visual Studio 2013 that should work although you may have to change the connection string in web.config from "MSSqlLocalDB" to "v11.0" depending upon which version of LocalDB you have installed.

If you're using Node.js/Express/MongoDB

If you don't already have Node.js on your machine install it from http://nodejs.org. You'll also need to install MongoDB from http://www.mongodb.org if you don't have it already and get it configured and running using the instructions on their site.

In the CustomerManager directory execute 'npm install' to install Express, MongoDB and Mongoose (package.json).

Load MongoDB Sample Data Option 1:

Load data into MongoDB by performing the following steps:

• Execute 'mongod' to start the MongoDB daemon
• Navigate to the CustomerManager/server directory (the one that has initMongoData.js in it)
• Execute 'mongo' to start the MongoDB shell
• Enter the following in the mongo shell to load the data seed file:
• use customermanager
• load("initMongoData.js")

Load Sample Data Option 2:

Alternatively you can navigate to CustomerManager/server and double-click the initMongoData.bat (Windows) or initMongoData.sh (Mac/Linux) file to initialize MongoDB with the data.

The Windows script assumes that MongoDB is installed at c:\mongodb while the Linux/Mac script relies on the fact that you have the monogo executable in the path.

Start the Node/Express server:

• Open a command prompt
• Navigate to the CustomerManager directory
• Run 'npm install' at the command prompt
• Navigate to the CustomerManager/server directory
• Run 'node server.js'

View the application at http://localhost:3000

Thanks to Tony Quinn for contributing the initial Node.js/MongoDB code!

E2E tests using Protractor:

E2E tests using Protractor for .NET, and Selenium's WebDriver wrapper for Angular

Tests are written with NUnit but feel free to change it. (Tests use http://localhost:58000/ so make sure IIS Express is running the app)

There are several ways to execute these tests:

• Using NUnit TestAdapter for Visual Studio 2012/2013 from the NUnitTestAdapter NuGet package.
• Using Visual Studio extensions like ReSharper or TestDriven.net.
• Using the command line or GUI provided by the NUnit.Runners NuGet package.

Thanks to Bruno Baia for the contribution

customermanagerstandard's Issues

Resource interpreted as Image but transferred with MIME type text/html

Hi, I followed all steps and started the server. Everything loads fine except of images. Also tested this with https://github.com/DanWahlin/CustomerManager (same problem).

I tested this with Chrome & Firefox on Ubuntu 12.04 using the latest Node.js.
My console shows the following errors:

Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:3000/Content/Images/people.png".
Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:3000/Content/Images/female.png".
Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:3000/Content/Images/male.png".

How change the text on Visual Studio?

If I change the text to the views inside visual studio 2017 and run node server.js I can see the translation of the text (top part of the picture) but If I run with F5 in Visual Studio (botom) still show the original version.

var NavbarController = function ($scope, $location, config, authService) {
        var vm = this,
            appTitle = 'Administrador de Vendedores';

What I have to do in VS so take the change in the view?

404 (Not Found) for /api/dataservice/customersSummary?$top=10&$skip=0

Hello, I got a simple error of 404 (Not Found) for URI: /api/dataservice/customersSummary?$top=10&$skip=0

I thought maybe I had copied wrong but I couldn't find the api folder nor anything titled 'customersSummary'. Can someone help provide guidance?

I see "dataService.js" in \CustomerManager\app\customersApp\services\ directory, I'm guessing I need MongoDB set up?

Edit Orders

Hi, I like your app. Can you add function to add orders?

Problem on running

Hello.

I am using VS 2012 Express for Web. I downloaded your CustomerManagerStandard in order to learn how you developed a complete solution using AngularJS. However your solution is not running as many errors occurs on project build process. I read your instructions and you didn't mention any steps to follow in order to build the project.

Errors:
(403) Forbridden
Error 23 Unable to find version '1.4.8' of package 'Breeze.Server.ContextProvider'. CustomerManager
Error 24 Unable to find version '1.4.8' of package 'Breeze.Server.ContextProvider.EF6'. CustomerManager
Error 25 Unable to find version '1.4.8' of package 'Breeze.Server.WebApi2'. CustomerManager
Error 26 Unable to find version '1.4.8' of package 'Breeze.WebApi2.EF6'. CustomerManager
Error 27 Unable to find version '6.0.2' of package 'EntityFramework'. CustomerManager
Error 28 Unable to find version '2.1.0' of package 'jQuery'. CustomerManager
Error 29 Unable to find version '4.0.30506.0' of package 'Microsoft.AspNet.WebApi'. CustomerManager
Error 30 Unable to find version '5.0.0' of package 'Microsoft.AspNet.WebApi.Client'. CustomerManager
Error 31 Unable to find version '5.0.0' of package 'Microsoft.AspNet.WebApi.Core'. CustomerManager
Error 32 Unable to find version '5.0.1' of package 'Microsoft.AspNet.WebApi.OData'. CustomerManager
Error 33 Unable to find version '5.0.1' of package 'Microsoft.AspNet.WebApi.WebHost'. CustomerManager
Error 34 Unable to find version '5.6.0' of package 'Microsoft.Data.Edm'. CustomerManager
Error 35 Unable to find version '5.6.0' of package 'Microsoft.Data.OData'. CustomerManager
Error 36 Unable to find version '2.0.20710.0' of package 'Microsoft.Net.Http'. CustomerManager
Error 37 Unable to find version '1.0.0.0' of package 'Microsoft.Web.Infrastructure'. CustomerManager
Error 38 Unable to find version '6.0.1' of package 'Newtonsoft.Json'. CustomerManager
Error 39 Unable to find version '1.0.0' of package 'Q'. CustomerManager
Error 40 Unable to find version '2.1.6' of package 'RequireJS'. CustomerManager
Error 41 Unable to find version '5.6.0' of package 'System.Spatial'. CustomerManager
Error 42 Unable to find version '1.5.3' of package 'WebActivator'. CustomerManager

Please advice.

Is there a video for this project?

In the blog

https://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes

There is a link for Customer Manager App Demo

https://www.youtube.com/watch?v=qCzYrDgOy1A

But doesnt exist anymore.

project is incompatible with this version of Visual Studio 2012

im getting thiss error when i try to open customermanager.sln. i even changed the .net to v4 but after that also same problem persists need help !!

Update Customer does not work well

Some time it update customer correctly, but mostly it does not.
BUT the message says "Updated".

Would you please advise what is the problem?
I tried both with config Breeze true and false. The same issue persist.

Thank you!

Reinhard Sual

Unique e-mail error

I did everything by instruction but I keep getting this error no matter what. Everything else is functioning but this error keeps me from using the app. I did everything by instruction, mondo and mondodb are working great and I run similar apps with no issues.

E2E-Test ShowTop10Customers() 2 vm. prefixes missing

public void ShowTop10Customers()
...
    .("customer in vm.filteredCustomers"));  // add "vm." (line 65)
...
    .FindElement(NgBy.Binding("vm.totalRecords"));   //add vm. (line 68)

Sorry, I don't know how to bring this changes into your code. I think fork and then edit my version, but didn't looked up how to request that you can merge my changes into your master ...

Not working with MongoDB 3.2.0

The Visual Studio and .NET build is working fine, but i'm looking to get it working with the MEAN stack. I have node-v5.2.0 and MongoDB 3.2.0. It starts up fine and the page loads, but it doesn't show any customer data (i have imported the data to MongoDB and the node.js window says "Customers count: 23"). I get following errors in browser console:

angular.js:12221SyntaxError: Unexpected token u
    at Object.parse (native)
    at vc (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:15:313)
    at $b (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:81:301)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:82:216
    at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:7:322)
    at ed (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:82:198)
    at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:83:382)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:119:302
    at m.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:134:83)
    at m.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:131:106)(anonymous function) @ angular.js:12221
angular.js:12221TypeError: Cannot read property 'message' of undefined
    at customersController.js:124
    at angular.js:14454
    at m.$eval (angular.js:15719)
    at m.$digest (angular.js:15530)
    at m.$apply (angular.js:15824)
    at l (angular.js:10263)
    at M (angular.js:10435)
    at XMLHttpRequest.x.onload (angular.js:10376)

I've looked at the code a bit and there might be a problem on getCustomersSummary()-function in accessDB.js. The customersSummary that is in the callback seems to be left "undefined".

Can you please add a license

Thanks,
Aleck

Error: error loading js file: initMongoCustData.js

I run the mongo shell to load the seed files,but there was the "Error: error loading js file: initMongoCustData.js" in CMD.

the below screen_shut:

add new fields list orders

How I can add new fields to the list of orders

I created new fields in the Orders table.
I added fields to the file order.cs and customer.js
I modified the file OrderTable.html. But I can not see setOrder ('myField')
Please I could put a clear example.

Thanks in advance

Apply require js on modalservice

Hi
I am using your code in my project but i cant apply require js on modal service .
can you give me a sample for that?

thank for nice project and right codes

Public Customer Manager in IIS

Hi
A week ago I download your Customer Project Manager, I have edited with Visual Studio 2013 and it works perfectly from VS.

But when I publish the project in IIS and call it from a browser application loads the right, try to load the data and the error "An error has ocurred" appears.

That may be happening

E2E-Test NoCustomersOnCardView() - pathes for .whenGET need fixing

//$httpBackend.whenGET(/^\/app\/partials\//).passThrough();  // line 80
$httpBackend.whenGET(/^\/app\/customersApp\/partials\//).passThrough();

//$httpBackend.whenGET(/^\/app\/views\//).passThrough();  // line 82
$httpBackend.whenGET(/^\/app\/customersApp\/views\//).passThrough();

And you can omit the leading \ after .whenGET(' ...

$httpBackend.whenGET('\/api/...  // Line 84

Incorrect filter behaviour

If you fill filter as Jones (not existent name on 1st page) it will hide all records from 1st page, without asking backend, more over - if you go to 2nd and 3rd page it will show unfiltered results, and filter will be able to be updated by change the filter field only.

Missing States, unable to create new

Thinking it would be a good idea to pre-populate the states table for new installations. If not seeded, then adding new customers is not possible as the validation of the state field will never pass as there are no states to choose from.

---

Warning all users, read the FULL release notes (that means scroll down to the specific node instructions). My bad here folks, all works just fine if you follow all instructions)

How can I run it on webstorm

I tried to run npm install in the CustomerManager folder but it just returned:
npm WARN package.json [email protected] No description
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data
npm WARN package.json [email protected] No license field.
and didn't installed anything.

E2E-Test DeleteCustomerOnCardView() - fixed several issues

Mock delete customer 2 so it doesn't get deleted in the real database:

$httpBackend.whenDELETE('/api/dataservice/deleteCustomer/2').respond(
200, [], { 'X-InlineCount': 1} );

Because you need to be logged-in, let login call pass through

$httpBackend.whenPOST('/api/dataservice/login').passThrough();

The code to do the login

 ngDriver.Navigate().GoToUrl("http://localhost:58000/#/customers"); // org. code

// login before delete neccessary - little bit lengthy, but easier to debug ..
var loginBtn = ngDriver.FindElement(By.XPath("//a[contains(.,'Login')]"));
loginBtn.Click();
var eMail = ngDriver.FindElement(NgBy.Model("vm.email"));
eMail.SendKeys("[email protected]");
var password = ngDriver.FindElement(NgBy.Model("vm.password"));
password.SendKeys("password");

var loginBtnBottom = ngDriver.FindElement(By.XPath("//button[contains(.,'Login')]"));
loginBtnBottom.Click();
// END of login test code

var cardElement = ngDriver.FindElement(By.ClassName("cardContainer")); // org. code

and add vm. prefixes on some lines

.FindElement(NgBy.Binding("vm.totalRecords")); // vm. added
.FindElements(NgBy.Repeater("customer in vm.filteredCustomers")); // vm. added
Assert.AreEqual(1, cardElement.FindElements(NgBy.Repeater("customer in vm.filteredCustomers")).Count); // vm. added