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

浏览数：20 / 时间：2015年06月09日

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

一、什么是angularjs

angularjs是2009年兴起的，目前由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     }]);