angularjs入门

MVC之路由、模块以及依赖注入

时间:2015-08-07 16:47来源:网络整理 作者:KKWL 点击:
前面呢,我们大概的了解了下AngularJs的入门,也做过了hello world的一个demo,不知道大家有没有掌握呢?在下面我们需要讲一些AngularJS的一些干货。 1,一个完整项目的目录结构 以上图片

前面呢,我们大概的了解了下AngularJs的入门,也做过了hello world的一个demo,不知道大家有没有掌握呢?在下面我们需要讲一些AngularJS的一些干货。

1,一个完整项目的目录结构

以上图片是根据大漠老师的整理而得,告诉大家一个好消息是,大漠老师的课程在慕课网上,每晚将近2万人学习。

2,package.json文件

{ "version": "0.0.0", "private": true, "name": "angular-recommended", "description": "ng官方推荐的项目结构", "license": "MIT", "devDependencies": { "http-server": "^0.6.1", "bower": "^1.3.1" }, "scripts": { "postinstall": "bower install", "prestart": "npm install", "start": "http-server -p 8000" } }

package.json文件是给npm工具用的,把这个copy到你的文件(名字为package.json),运行 npm start即可。

3,index.html

BookStore

上面是我们的html的主文件,用来加载我们所需要的 js和css,另外,我们在此建立一个“根视图”,它的作用是用来包裹后面插入进来的代码片段的。也可以加一些很炫的动画效果

4,tpls目录--存放代码片段

书名:{{book.title}}   作者:{{book.author}}

这个是tpls目录中的一个html文件,叫bookList.html文件,看里面就这么些东西,并不是一个完整的html文件,我们叫代码片段,借用angularjs我们可以给其赋值并插入到index.html的根目录中。

ng-repeat是重复调用就像是我们用的 for in一样,在这里呢会重复生成多个 <li>...</li>这样的目录结构。

5,js目录--app.js

上面我们说过app.js是程序的主入口点,也就是说,如果程序运行的话,会首先运行app.js,根据app.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' }) });

首先我们要建一个模块,angularjs所有的程序都是建立在模块上的。让我们看看,我们建立的模块名称呢叫 bookStoreApp,这个也是index.html中 ng-app的值,上节我们就说过了ng-app的作用在此就不在说了。

当程序走到这呢,会发现这个模块需要依赖很多的模块(angular.module(ModuleName',[..依赖模块..])),程序呢就会根据数组里面的模块名称一个一个加载进来,在此说下,这个模块名称呢是 framework文件里面的某个文件名。

下面我们看看 模块的配置,有一个 $routeProvider 这个呢是路由控制器它的作用是根据不同的url控制不同的视图展示出来,当用 .when()的时候,如果url地址满足里面的条件的话呢,就会找到模板文件并执行定义好的controll文件给模板文件赋值并插入到index.html的根目录,如果都找不到就会执行 otherwise()里面的方法。下面看效果

ok,注意看浏览器中的地址栏,会发现同样的文件(index.html),而后面的参数不同显示的结果也不同。在里面我们会看到一个 # 这个会告诉浏览器在页面内跳转。

6,js目录--controllers.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:"《Ext江湖》",author:"大漠穷秋"}, {title:"《ActionScript游戏设计基础(第二版)》",author:"大漠穷秋"}, {title:"《用AngularJS开发下一代WEB应用》",author:"大漠穷秋"} ] } ]); /** * 这里接着往下写,如果控制器的数量非常多,需要分给多个开发者,可以借助于grunt来合并代码 */

看上面的代码,我建立了两个控制器,控制器里我们给$scope赋值,这会根据app.js里面的路由来载入到代码片段并且生成一个赋完值的html。

 

------分隔线----------------------------