So, how to quick start with angular? For example, you need some kind of shopping cart. Here is step by step tutorial:
1. Create app/app.js file - this is our main module.
var shoppingCart = angular.module('shoppingCart',['ngRoute']);
2. Then you can configure your routes:
shoppingCart.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'app/views/home.html', //path to our view
controller: 'productController' //page controller
});
$routeProvider.otherwise({ redirectTo: '/' });
}]);
3. Create service (app/services/productService.js) which will deliver data into your app.
shoppingCart.factory('productService',function($http){
return {
getAll: function(){
return $http({"method": "GET", "url": "app/data/data.json"}); /*also you can path here more parameters like data etc*/
}
}
});
1. Create app/app.js file - this is our main module.
var shoppingCart = angular.module('shoppingCart',['ngRoute']);
2. Then you can configure your routes:
shoppingCart.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'app/views/home.html', //path to our view
controller: 'productController' //page controller
});
$routeProvider.otherwise({ redirectTo: '/' });
}]);
3. Create service (app/services/productService.js) which will deliver data into your app.
shoppingCart.factory('productService',function($http){
return {
getAll: function(){
return $http({"method": "GET", "url": "app/data/data.json"}); /*also you can path here more parameters like data etc*/
}
}
});
4. Create your controller - app/controllers/productController.js
shoppingCart.controller('productController',['$scope','productService', function($scope, productService){
productService.getAll().success(function (data, status, headers, config) {
$scope.products = data;
});
}]);
Note $http returns promise. So to access data we need do something like productService.getAll().success(function (data, status, headers, config) {....}
5. Create you view at app/views/home.html (see app route config)
<div class="row" ng-controller="productController">
<div class="col-sm-4" ng-repeat="p in products">
<div class="product-image"><a href="#/product/{{p.id}}"><img ng-src="{{ p.images[0] }}" alt="{{p.name}}" width="100%"/></a></div>
<div class="well text-center">
<h2>{{ p.name }}</h2>
<h3><span class="label label-success">${{ p.price }}</span></h3>
<a href="#/product/{{p.id}}" class="btn btn-primary btn-lg">Details</a>
</div>
</div>
</div>
</div>
ng-controller specify controller to contrete div. ng-repeat is simple foreach for you data. To render data use {{ your_data }}.
6. If needed add your directives. Directives is very powerful thing. You can create custom attributes or even entire elements (see restrict property)
shoppingCart.directive('jqueryBindExample',function(){
return{
restrict: 'A', //E means elemnts, a-attribut, C- class
link: function(scope, element, attrs){
$(element).addClass('class-from-jquery');
}
}
});
7. in your index html, include all required files.
<script type="text/javascript" src="app/vendor/angular.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js"> </script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/services/productService.js"></script>
<script type="text/javascript" src="app/controllers/productController.js"></script>
<script type="text/javascript" src="app/directives/jqueryBindExample.js"></script>
8. Specify your main module
<html ng-app="shoppingCart">
9. Specify div where you'll render your views with ng-view directive (pls note ng-views requires ngRoute module from angular-route.js).
<div ng-view></div>
10. Enjoy app!
Pls note you can create multiple modules (in this tutorial all controllers, directives and services are in single module called shoppingCart) and then inject tis modules like we did with ngroute (var shoppingCart = angular.module('shoppingCart',['ngRoute','yourModule']);)
Here is link to github.
Comments
Post a Comment