AngularJS Basics: Difference between revisions
No edit summary |
No edit summary |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
[[Category:AngularJS]] [[Category:Web Development]] | [[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` | CDN: `//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js` | ||
| Line 13: | Line 27: | ||
Then in order to update another distribution of the web app, `npm install` on the new server. | 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 == | == See also == | ||
* [[AngularJS resources]] | * [[AngularJS resources]] | ||
=== Notes === | |||
<references /> | |||
Latest revision as of 02:33, 7 December 2015
App installation[edit]
The 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[edit]
npm and bower[edit]
bower can be used to install the Angular framework.
CDN[edit]
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[edit]
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[edit]
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.
<html lang="en" ng-app="myappApp" class="ng-scope">
Define a controller's scope with ng-controller, e.g.
<body ng-controller="MyListCtrl" class="ng-scope">
Object properties are inserted into a template with double curly braces, e.g. Template:Myobj.name
Controller logic is located in myapp/js/controllers.js. Fore the examples above the controller logic might look like this:
var myappApp = angular.module('myappApp', []);
myappApp.controller('MyListCtrl', function($scope) {
/* retrieve data here */
});
Testing Angular[edit]
Unit tests[edit]
Unit tests are performed using karma using Jasmine's behavior-driven development (BDD) syntax.
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);
}));
});
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.[1]
End to end tests[edit]
See also[edit]
Notes[edit]
- ↑ Angular tutorial step 2 - Angular Templates