[Angularjs] 第一步开始一个项目

[Angularjs] 第一步开始一个项目

一、什么是angularjs

angularjs2009年兴起的,目前由Google维护一个采用mvc模式的js框架,很多时候用来创建单页面应用。我也经常将其和phonegap一起来开发webapp

二、Angularjs项目结构

通常代码可以这样:index.html

第一个js文件(angular.js)是核心文件,必须有。而其他angular-*.js都是功能文件,如果项目不需要使用到可以不引用的。

app.js文件是对angular应用的定义,本例中代码如下:

1 ‘use strict‘;
 2 
3 angular.module(‘interApp‘, [
4 ‘ngCookies‘,
5 ‘ngResource‘,
6 ‘ngSanitize‘,
7 ‘ngRoute‘
8 ])
9     .config(function ($routeProvider) {
10         $routeProvider
11             .when(‘/‘, {
12                 templateUrl: ‘views/index.html‘,
13                 controller: ‘IndexCtrl‘
14             }).when(‘/report‘, {
15                 templateUrl: ‘views/reports.html‘,
16                 controller: ‘ReportsCtrl‘
17             }).when(‘/report/:id‘, {
18                 templateUrl: ‘views/report_detail.html‘,
19                 controller: ‘ReportDetailCtrl‘
20             }).otherwise({
21                 redirectTo: ‘/‘
22             });
23     });

代码中定义了一个angular应用叫interApp,而且重定向了路由,example.com/index.html#/report 就会调用ReportsCtrl控制器,而对应的视图是views/reports.html

上例中ReportsCtrl控制器的定义在最先的main.js文件。如下:

1 angular.module(‘interApp‘)
2     .controller(‘IndexCtrl‘,[‘$scope‘,function($scope){
 3 
4     }]).controller(‘ReportsCtrl‘,[‘$scope‘,function($scope){
5         (function(){//初始化的函数
6             $scope.people = {
7                 nickname: ‘HuangJacky‘,
8                 img : ‘http://localhost:63342/inter/app/images/logo.png‘,
9                 score: 20,
10                 website: ‘http://huangjacky.com‘,
11                 realname: ‘Fiend Huang‘,
12                 address: ‘belford street 202,lodon,England‘,
13                 telephone: ‘+861587083168‘
14             }
15         })();
16     }]);

angularjs中各个文件相互的关系大致就是这样的了

三、快速创建angularjs项目

目前创建一个angularjs项目可以分成手动和自动两种方法。

手动其实就是自己去下这些js文件,然后在html中添加相应的引用,然后创建app.js和控制器定义文件。

而自动创建一个项目的方法,我知道的有两种:

  • angular-seed

  • yeoman

angular-seedgithub上面一个开源的项目,你只需要git clone一下,一个angular项目结构就有了,剩下来的事就是写控制器和视图,挺快捷的。

yeoman是一个工作流的自动化工具,不仅仅针对angularjs。当然使用前必须安装,而且它是基于nodejs的,因此请先安装好,然后在命令行中输入:

接着在命令行中输入yo 或者 yo angular,就会出现如图的效果:



四、参考

Angularjs:http://angularjs.org/

angular wiki:http://zh.wikipedia.org/wiki/AngularJS

angular-seed:https://github.com/angular/angular-seed

yeoman:http://yeoman.io/

angular常用教程:http://angularjs.cn/hots





[Angularjs] 第一步开始一个项目,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。