[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 }]);

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

三、快速创建angularjs项目

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

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

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

  • angular-seed

  • yeoman

angular-seed是github上面一个开源的项目,你只需要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] 第一步开始一个项目的更多相关文章

  1. 零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸)

    原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要 ...

  2. 搭建数据驱动框架第一步-实现一个构造函数,将对Excel文件的基本操作API都封装进去

    Python处理Excel常用操作就是读和写,我的需求是需要在原excel文件中进行读写操作.共用到了两个模块xlrd和openpyxl,这两个模块都是需要自己去安装的.openpyxl只能用来处理 ...

  3. 使用AChartEngine第一步:在项目中配置AChartEngine环境

    1. 从AChartEngine官网上下载acharengine的jar文件包. 地址:https://code.google.com/p/achartengine/downloads/list 2. ...

  4. None.js 第一步 开启一个服务 hello world

    引入 http 模块 var http = require('http'); 创建服务器 http.createServer(function (request, response) { // 发送一 ...

  5. SSM项目整合第一步 注册登陆实现

    SSM项目整合第一步  注册: 项目目录: 一.数据库建表: 源码: ; -- ---------------------------- -- Table structure for t_user - ...

  6. vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...

  7. Django入门第一步:构建一个简单的Django项目

    Django入门第一步:构建一个简单的Django项目 1.简介 Django是一个功能完备的Python Web框架,可用于构建复杂的Web应用程序.在本文中,将通过示例跳入并学习Django.您将 ...

  8. 又见angular----步一步做一个angular4小项目

    这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...

  9. 第一讲 从头开始做一个web qq 机器人,第一步获取smart qq二维码

    新手教程: 前言:最近在看了一下很久很久以前做的qq机器人失效了,最近也在换工作目前还在职,时间很挺宽裕的.就决定从新搞一个web qq机器人 PC的协议解析出来有点费时间以后再做. 准备工作: 编译 ...

随机推荐

  1. maven 多个jar包版本依赖问题

    maven 中使用jar包的多个版本容易造成依赖问题,解决问题的方式可以将 使用jar包的版本排除掉,比如dubbo使用netty 4.0.33版本可以将dubbo排除掉 netty依赖,这样其他ja ...

  2. SQLserver 新用户的创建以及权限的给与

    我们有时在装sql server 2008或者2012的时候,发现在装的时候,忘记设置sa用户的密码了,其实sa用户是sql server自带的用户,所以我们在装数据库的时候只需要设置一个密码就可以了 ...

  3. POJ.2891.Strange Way to Express Integers(扩展CRT)

    题目链接 扩展中国剩余定理:1(直观的).2(详细证明). [Upd:]https://www.luogu.org/problemnew/solution/P4774 #include <cst ...

  4. Python3绘图之Matplotlib(03)

    饼图 = pie 散点图 = scatter plots 极化图 = polar charts 箭头 = Annotations 本节代码示例 import matplotlib.pyplot as ...

  5. Java并发程序设计(八)设计模式与并发之单例模式

    设计模式与并发之单例模式 简单的单例实现: public class Singleton { private Singleton(){ System.out.println("Creatin ...

  6. python——描述符

    本文主要介绍描述符的定义,个人的一些理解:什么是数据描述符:什么是非数据描述符:描述符的检测等.希望看完这篇文章后,你对描述符有了更清晰的认识.知道怎么判断一个对象是不是描述符,知道如果定义一个描述符 ...

  7. Loadrunner11的安装方法和破解

    前提:我使用的是在虚拟机下安装32位win7系统,浏览器为IE8(为录制脚本做铺垫) LoadRunner,是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式 ...

  8. C语言字符串操作详细总结

    1)字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长度 ...

  9. unity 背景无限循环滚动效果

    背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...

  10. [Beego模型] 一、ORM 使用方法

    [Beego模型] 一.ORM 使用方法 [Beego模型] 二.CRUD 操作 [Beego模型] 三.高级查询 [Beego模型] 四.使用SQL语句进行查询 [Beego模型] 五.构造查询 [ ...