文档章节

[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.0正式版发布,都有哪些新功能

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

异步社区
05/08
0
0
Angular 6正式版发布,都有哪些新功能

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

code_xzh
05/05
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0
使用Yeoman快速构建基于angular的web应用

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

snakelxc
2013/08/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周三乱弹 —— 我居然在 osc 里追剧

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @舆情风控小组 :分享王菲的单曲《笑忘书》 《笑忘书》- 王菲 手机党少年们想听歌,请使劲儿戳(这里) @艾尔库鲁斯:如果给大家一个选择的机...

小小编辑
44分钟前
70
6
rabbitMq的客户端使用笔记

1、channel声明队列的queueDeclare方法的参数解析 durable: 是否持久化, 队列的声明默认是存放到内存中的,如果rabbitmq重启会丢失,如果想重启之后还存在就要使队列持久化,保存到Erlang自...

DemonsI
52分钟前
0
0
“全新” 编程语言 Julia开箱体验

本文共 851字,阅读大约需要 3分钟 ! 概 述 Julia 是一个 “全新”的高性能动态编程语言,前两天迎来了其 1.0 正式版的重大更新。Julia集 Python、C、R、Ruby 之所长,感觉就像一种脚本语言...

CodeSheep
今天
12
0
软件自动化测试初学者忠告

题外话 测试入门 很多受过高等教育的大学生经常问要不要去报测试培训班来入门测试。 答案是否。 高等教育的合格毕业生要具备自学能力,如果你不具备自学能力,要好好地反省一下,为什么自己受...

python测试开发人工智能安全
今天
5
0
java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部