Editing AngularJS Basics

[[Category:AngularJS]] [[Category:Web Development]]
== App installation ==

The [https://github.com/angular/angular-seed angular-seed project] can be used to create core project components. 

Update `bower.json` to add front-end frameworks to the seed project, e.g. with Twitter Bootstrap.

In the tutorial stub data was added as JSON files in `app/phones/`. 

== AngularJS installation ==

=== npm and bower ===

bower can be used to install the Angular framework.

=== CDN ===

CDN: `//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js`

Click '''Download''' on the AngularJS landing page. On the next page all the distributions are listed. 

== Project dependencies ==

Project dependencies can be managed with `npm`. All project dependencies are stored in `package.json` in the project root. 

E.g. `karma` is a unit testing package. Install with `npm install karma --save-dev`. 

Then in order to update another distribution of the web app, `npm install` on the new server.

The AngularJS tutorial uses bower to install the AngularJS framework. So, `npm install` installs bower, which is then in turn used to install `angular`, `bootstrap`, and `jquery` packages in `app/bower_components/`

== Using Angular ==

Templates are located in app folders, e.g. if the app is `myapp/`, the template can be `myapp/index.html`.

Define "root scope" with the `ng-app` attribute, e.g.

<syntaxhighlight lang="html5">
<html lang="en" ng-app="myappApp" class="ng-scope">
</syntaxhighlight>

Define a controller's scope with `ng-controller`, e.g.

<syntaxhighlight lang="html5">
<body ng-controller="MyListCtrl" class="ng-scope">
</syntaxhighlight>

Object properties are inserted into a template with double curly braces, e.g. `{{ myobj.name }}`

Controller logic is located in `myapp/js/controllers.js`. Fore the examples above the controller logic might look like this:

<syntaxhighlight lang="javascript">
var myappApp = angular.module('myappApp', []);

myappApp.controller('MyListCtrl', function($scope) {
    /* retrieve data here */
});
</syntaxhighlight>

== Testing Angular ==

=== Unit tests ===

Unit tests are performed using `karma` using Jasmine's behavior-driven development (BDD) syntax. 

<syntaxhighlight lang="javascript">
describe('PhoneListCtrl', function(){

  beforeEach(module('phonecatApp'));

  it('should create "phones" model with 3 phones', inject(function($controller) {
    var scope = {},
        ctrl = $controller('PhoneListCtrl', {$scope:scope});

    expect(scope.phones.length).toBe(3);
  }));

});
</syntaxhighlight>

Run unit tests with `npm test` from the project root directory.

This will launch a process that continues to run. Tests will be re-run each time any source file is saved.<ref>[https://docs.angularjs.org/tutorial/step_02 Angular tutorial step 2] - Angular Templates</ref> 

=== End to end tests ===

== See also ==

* [[AngularJS resources]]

=== Notes ===
<references />