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

来源：互联网发布：对人工智能的看法作文编辑：程序博客网时间：2024/05/23 16:55

简单模块的建立：

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

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

0 0