文档章节

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

huangjacky
 huangjacky
发布于 2014/10/12 12:21
字数 592
阅读 33
收藏 0

[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





本文转载自:http://www.cnblogs.com/huangjacky/p/3618565.html

共有 人打赏支持
huangjacky
粉丝 5
博文 19
码字总数 0
作品 0
深圳
高级程序员
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh
05/05
0
0
Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区
05/08
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

snakelxc
2013/08/25
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

kisops
2013/08/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
36
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
29
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
40
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
28
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
39
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部