AngularJS (Setup / Controller )

AngularJS (Setup / Controller )

Download

angular.min.js

https://angularjs.org/

Twitter Bootstrap (bootstrap.min.js)

http://getbootstrap.com/

Module

Is where we write our code

Implement Angular

Create a javascript file to type your code

<script type="text/javascript" src="resources/myapp.js">

Create a Module

In your javascript file create your first module

Specify that is an Angular application

Add in the tag <html> the attribute ng-app="module_name"
This means that will run the module with name module_name

Tutorials

http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

https://egghead.io/
http://www.thinkster.io/

API

http://kapeli.com/dash

Expressions

You can include in your code an expression

{{ 4 + 6 }}
{{ "Hello" + "message" }}

Controller

Where is defined the app's behaviour, the functions and values

Create a Controller

Create a function

(function () {} ) ();
As a good practice wrap your function in a closure

Create a Module

var app = angular.module('controller', []);

Define the controller inside the function

app.controller('AppController', function (){
});

Define the properties inside the controller function

this.saleproduct= object4Sale;
Where object can be

var object4Sale= {
name: 'Porche' ,
price: 295 ,
desc: "My first car"
}

Ending in something like this

var app = angular.module('store', []);

(function() {

var app = angular.module('controller', []);

app.controller('AppController', function() {

this.saleproduct = object4Sale;

});

var object4Sale = {

name : 'Name',

price : 2.95,

desc: "My first product sold"

}

})();

Display our controller in the View

Add the Directive ng-controller to add the controller

<div ng-controller="AppController as store">

AppController is you controller name
store is an allias

Inside the div display the information calling the properties

{{ product.saleproduct.name}}

Comentarios