AngularJs的路由、模块化与依赖注入

简单模块的建立：

js;

var helloModule = angular.module('HelloAngular',[]);
helloModule.controller('helloNgCtrl',['$scope',function($scope){
	$scope.greeting = {
		text:'Hello'
	};
}]);

html：

	
	


	

		
{{ greeting.text }},Angular
	

ng一般使用app:controllers,directives,services,routes,filters进行结构部署

使用路由进行页面视图传递：ngRoute : routeProvider

基本视图：

载入必要js：

    
    
    
    
    
    
    
 
 
  
   
 
  
 
  
 
  
 启动js： 
  
 
  
 
  
var bookStoreApp = angular.module('bookStoreApp', [
    'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
    'bookStoreServices', 'bookStoreDirectives'
]);
bookStoreApp.config(function($routeProvider) {
    $routeProvider.when('/hello', {
        templateUrl: 'tpls/hello.html',
        controller: 'HelloCtrl'
    }).when('/list',{
    	templateUrl:'tpls/bookList.html',
    	controller:'BookListCtrl'
    }).otherwise({
        redirectTo: '/hello'
    })
});
 
  
 控制器js： 
  
 
  
 
  
var bookStoreCtrls = angular.module('bookStoreCtrls',[]);

bookStoreCtrls.controller('HelloCtrl',['$scope',
	function($scope){
		$scope.greeting = {
			text:'hello'
		};
	}
]);

bookStoreCtrls.controller('BookListCtrl',['$scope',
	function($scope){
		$scope.books = [
			{"title":"jasklfjklasf",author:"1231"},
			{"title":"jasklfjklasf",author:"1232"},
			{"title":"jasklfjklasf",author:"1233"}
		]
	};
]);
 
  
 
  
 
  
 
  
 
  
有参考 大漠穷秋的教学视频