[Angularjs] 第一步开始一个项目
[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] 第一步开始一个项目的更多相关文章
- 零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸)
原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要 ...
- 搭建数据驱动框架第一步-实现一个构造函数,将对Excel文件的基本操作API都封装进去
Python处理Excel常用操作就是读和写,我的需求是需要在原excel文件中进行读写操作.共用到了两个模块xlrd和openpyxl,这两个模块都是需要自己去安装的.openpyxl只能用来处理 ...
- 使用AChartEngine第一步:在项目中配置AChartEngine环境
1. 从AChartEngine官网上下载acharengine的jar文件包. 地址:https://code.google.com/p/achartengine/downloads/list 2. ...
- None.js 第一步 开启一个服务 hello world
引入 http 模块 var http = require('http'); 创建服务器 http.createServer(function (request, response) { // 发送一 ...
- SSM项目整合第一步 注册登陆实现
SSM项目整合第一步 注册: 项目目录: 一.数据库建表: 源码: ; -- ---------------------------- -- Table structure for t_user - ...
- vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目
vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...
- Django入门第一步:构建一个简单的Django项目
Django入门第一步:构建一个简单的Django项目 1.简介 Django是一个功能完备的Python Web框架,可用于构建复杂的Web应用程序.在本文中,将通过示例跳入并学习Django.您将 ...
- 又见angular----步一步做一个angular4小项目
这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...
- 第一讲 从头开始做一个web qq 机器人,第一步获取smart qq二维码
新手教程: 前言:最近在看了一下很久很久以前做的qq机器人失效了,最近也在换工作目前还在职,时间很挺宽裕的.就决定从新搞一个web qq机器人 PC的协议解析出来有点费时间以后再做. 准备工作: 编译 ...
随机推荐
- maven 多个jar包版本依赖问题
maven 中使用jar包的多个版本容易造成依赖问题,解决问题的方式可以将 使用jar包的版本排除掉,比如dubbo使用netty 4.0.33版本可以将dubbo排除掉 netty依赖,这样其他ja ...
- SQLserver 新用户的创建以及权限的给与
我们有时在装sql server 2008或者2012的时候,发现在装的时候,忘记设置sa用户的密码了,其实sa用户是sql server自带的用户,所以我们在装数据库的时候只需要设置一个密码就可以了 ...
- POJ.2891.Strange Way to Express Integers(扩展CRT)
题目链接 扩展中国剩余定理:1(直观的).2(详细证明). [Upd:]https://www.luogu.org/problemnew/solution/P4774 #include <cst ...
- Python3绘图之Matplotlib(03)
饼图 = pie 散点图 = scatter plots 极化图 = polar charts 箭头 = Annotations 本节代码示例 import matplotlib.pyplot as ...
- Java并发程序设计(八)设计模式与并发之单例模式
设计模式与并发之单例模式 简单的单例实现: public class Singleton { private Singleton(){ System.out.println("Creatin ...
- python——描述符
本文主要介绍描述符的定义,个人的一些理解:什么是数据描述符:什么是非数据描述符:描述符的检测等.希望看完这篇文章后,你对描述符有了更清晰的认识.知道怎么判断一个对象是不是描述符,知道如果定义一个描述符 ...
- Loadrunner11的安装方法和破解
前提:我使用的是在虚拟机下安装32位win7系统,浏览器为IE8(为录制脚本做铺垫) LoadRunner,是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式 ...
- C语言字符串操作详细总结
1)字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长度 ...
- unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
- [Beego模型] 一、ORM 使用方法
[Beego模型] 一.ORM 使用方法 [Beego模型] 二.CRUD 操作 [Beego模型] 三.高级查询 [Beego模型] 四.使用SQL语句进行查询 [Beego模型] 五.构造查询 [ ...