AngularJS Tutorial - Intro
New version Angular 9
As stated by Wikipedia:
AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.
The small side note is that the learning curve for Angular is pretty steep.
Main concepts
- Scope: The scope is the state of the application at a given point in time. The scope reperesent all variables, function, objects in a certain moment. When a new child scope is created all modification made to the child scope can be local, or propagated to the parent. When the child scope is destroyed its specific values will be lost.
- Injection: Angular is heavily based on dependency injection.
- Modules: These are the entry points for the application. There must be only one module for each page, but multiple modules can be injected in the "main" module.
- Services: These are function or objects that are not strictly part of the functionality but offer their data or operations to all the requiring objects. This are nearly always passed to modules or controllers as dependencies
- Models: A model is any data that is reachable as a property of an angular Scope object.
- Views: For Angular, is the DOM loaded -and rendered- into the browser, after Angular has transformed the DOM according to templates, controllers and models.
- Controllers: They are elements used to augment the capabilities of the current scope, to add business functions. They are usually tied to a specific view.
- Filters: To filter the value of a variable in the scope to modify it for the view.
- Templates: These are, simply the pages, on which the previously explained items will be applied
- Directives: These are new dom attributes that will be invoked on the current model,scope and item. Like "ng-app" etc.
The target application
Our target will be a standard Contact Management Application (CMA from now :P ).
The steps will be:
- Create a simple data source
- Create straight pages without any javascript
- Setup the controllers
- Connect the services to the real data layer
- Prepare all the system for CRUD operations
Prerequisites
- Install a WAMP or LAMP. I personally use EasyPHP and I'll describe the process with it. A good alternative could be XAMPP that has version for Linux, Solaris and MacOS X (and of course Windows).
- Install EasyPHP, and start it
- Create a folder under EasyPHPInstallationDirectory\data\localweb\projects called angularjs
- Extract there the samples
External dependencies
Just for reference, if you need to work offline, you can download here the javascripts, css and images that are needed for the tutorial. And remind to change the path into the pages that references them!
Credits
Last modified on: September 03, 2014
