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

最新推荐文章于 2019-07-12 18:00:05 发布

fishermanmax

最新推荐文章于 2019-07-12 18:00:05 发布

阅读量546

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/fishermanmax/article/details/52083246

版权

AngularJs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

简单模块的建立：

js;

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

html：

<!doctype html>
<html ng-app="HelloAngular">
<head>
	<meta charset="utf-8">
	<title>module</title>
</head>
<body>
	<div ng-controller="helloNgCtrl">
		<p>{{ greeting.text }},Angular</p>
	</div>
</body>
<script src="js/angular.min.js"></script>
<script src="js/module.js"></script>
</html>

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

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

基本视图：

载入必要js：

<pre name="code" class="html"><script src="framework/1.3.0.14/angular.js"></script>
    <script src="framework/1.3.0.14/angular-route.js"></script>
    <script src="framework/1.3.0.14/angular-animate.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>

启动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"}
		]
	};
]);

有参考大漠穷秋的教学视频