文档章节

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

huangjacky
 huangjacky
发布于 2014/10/12 12:21
字数 592
阅读 32
收藏 0
点赞 0
评论 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 6.0正式版发布,都有哪些新功能

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

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

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

code_xzh ⋅ 05/05 ⋅ 0

【前端】—聊聊我认识的Angular

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

zt15732625878 ⋅ 05/19 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

勿以 star 数论高低!React 在前端框架世界仍是领先地位

上周在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量。 通过使用一个叫做 Star History 的工具,我们可以...

局长 ⋅ 06/21 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

AngularJS:跟随官方教程,一起构建一个简单的项目

AngularJS大白话简介: AngularJS是一个前端框架,和Bootstrap不同,他是一个为了构建 单页应用 而诞生的。Bootstrap是为了解决CSS样式和一些简单的互动(主要是提供了各种各样的样式,我们直...

那就远走 ⋅ 05/11 ⋅ 0

想开发Angular项目,但是没有开发环境?使用Docker So Easy!

不管是的开发还是学习Angular,环境是一个很大的问题,大家要在自己电脑上搭建一个Angular的开发测试环境还是非常麻烦的,请大家自行百度“搭建Angular开发环境”。OMG,要安装一堆东西。 但...

麦兜搞IT ⋅ 05/21 ⋅ 0

Multi-Stage Build多阶段Build Docker镜像

我们在上一篇手记 中给大家介绍了如何完全使用Docker搭建Angular开发和测试环境,今天我们接着这个话题给大家看看如果通过Docker部署Angular项目。 我们先看看假如没有Docker,我们一般怎么去...

麦兜搞IT ⋅ 05/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部