Angular is a phenomenal javascript framework created by Google which makes the lives of us javascript developers easier...
Features:
- Extends HTML with new attributes
- Ideal for SPA (Single Page Applications)
- Easy to learn
or, so I've been told...
...follow along as I explore some
of the core concepts of Angular.
of the core concepts of Angular.
Core Concept:
MVC or MV*
(Model - View - Control or Model - View Whatever)
MVC stands for Model, View, Controller,a proven approach to organizing application code
Model: That's the data; the business information of the application.
View: The HTML and presentation of the data. That's what the user sees and interacts with.
Controller: The connector that makes all the different pieces of our application work together.
Angular likes to use MV* techniques, where the * stands for 'whatever' (often refered to as MVW). In other words, the Controller part is different to usual
Components of Angular:
Scopes & Directives:
One of the most fundamental parts of Angular is scopes.
Scopes Explained -
Scopes hold your Models (that's your data),
they cooperate with your Controllers,
and they give the Views everything they need (that's what the user sees and interacts with).
The first scope we'll need is the application scope, that's the scope your Angular application can operate in. This is set up in our HTML using the ng-app attribute.
Example: <html ng-app="myApp">
The name of our app is "myApp".
The second scope is ng-controller;
this will determine where our controller can operate. There can be multiple controllers within our application. Each controller will have its own scope.
<div ng-controller="thisCtrl">
<!-- anything in here is within thisCtrl scope -->
</div>
Both ng-app and ng-controller, are Angular directives.
Think of an Angular directive as something that allows you to extend your HTML.
To be continued......
Resources:
- Angular: https://angularjs.org/
- AngularJS Tutorial by Thinkful: http://www.thinkful.com/learn/angularjs-tutorial-build-a-gmail-clone/#Setup-Scopes-and-Directives
