Augularjs-起步详解_AngularJS

今年项目的需要,开始琢磨研究前端开发,由于之前项目已经用Angularjs了,就顺其而然的继续沿用。

在使用Angularjs之前,先要准备好工具:Nodejs、npm、git、bower、fis

下面是各个工具的安装方法(开发机为64位的Win10):

1.Nodejs

1>下载安装:https://nodejs.org/dist/v6.2.2/node-v6.2.2-x64.msi
2>验证安装:node - v

2.npm

1> 验证安装(随着nodejs安装了):npm -v
2> 配置参数:
npm config set prefix "E:\tools\nodejs\node_global"
npm config set cache "E:\tools\nodejs\node_cache"
3> 设置node的环境变量:E:\tools\nodejs\node_global

3.git

下载安装:https://www.git-scm.com/download/win

4.bower

1> 安装: npm install -g bower;
2> 常用命令:
bower init;
bower install jquery;
bower uninstall jquery;
bower cache clean;
bower update;
3> 配置项目的.bowerrc
{
"directory": "app/lib"
}

 

5. fis

1> 安装:

npm install -g fis;
npm install -g fis-postpackager-simple;

2> 常用命令:
fis release -d ..\dist
fis release --optimize --md5 --pack -d ..\dist --domains
fis server open
fis server start
fis server stop

6. angular-seed

时间: 2024-09-03 03:37:27

Augularjs-起步详解_AngularJS的相关文章

Angular2从搭建环境到开发步骤详解_AngularJS

Angular-CLI 说到 cli 大家不陌生,每出一个框架都会有对应的 cli ,俗称脚手架.angular2 本身提供了起步项目 angular2-quickstart,我尝试了一下,发现不是很好用,其它的大部分扩展需要自行安装,之后看了一下 angular-cli 部署简单易用,还提供了快捷搭建项目的目录. 安装 首先,最好先升级 node 到 6.x 可以避免 node 版本过低带来的不必要的麻烦. npm install -g angular-cli 用法 ng --help 查看所

AngularJS控制器之间的通信方式详解_AngularJS

本文实例讲述了AngularJS控制器之间的通信方式.分享给大家供大家参考,具体如下: 一.利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值:如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型. 基本类型 function San

AngularJS创建自定义指令的方法详解_AngularJS

本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

AngularJS入门教程之数据绑定原理详解_AngularJS

本文实例讲述了AngularJS数据绑定原理.分享给大家供大家参考,具体如下: 注 这篇文章主要是写给新手的,是给那些刚刚开始接触Angular,并且想了解数据帮定是如何工作的人.如果你已经对Angular比较了解了,那强烈建议你直接去阅读源代码. Angular用户都想知道数据绑定是怎么实现的.你可能会看到各种各样的词汇:$watch,$apply,$digest,dirty-checking...它们是什么?它们是如何工作的呢?这里我想回答这些问题,其实它们在官方的文档里都已经回答了,但是我

AngularJS通过$http和服务器通信详解_AngularJS

$http AngularJS提供了$http服务来同服务端进行通信,$http服务队浏览器的XMLHttpRequest对象进行了封装,让我们可以以ajax的方式来从服务器请求数据. 在AngularJS中与远程HTTP服务器交互时会用一个非常关键的服务-$http.       1.$http是angular中的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互.       2.$http的使用方式和jquery提供的$.ajax操

Angular2 (RC5) 路由与导航详解_AngularJS

之前总结过RC4的路由配置,Angular2升级RC5之后增加了NgModule和RouterModule等等很多组件,所以现在的路由配置方式也变化比较大. 1.<base href> 大多数带路由的应用都要在 index.html 的 <head>标签下顶部添加一个<base>元素. 2.配置路由器 app.routing.ts import { Routes, RouterModule } from '@angular/router'; const appRoute

Angular2 (RC4) 路由与导航详解_AngularJS

基础知识 1.<base href> 大多数带路由的应用都要在 index.html 的 <head>标签下添加一个 <base>元素. 2.导入路由库 import { ROUTER_DIRECTIVES } from '@angular/router'; 3.配置 首选方案是用带"路由数组"的provideRouter工厂函数([provideRouter(routes)])来启动此应用. app.routes.ts import { provi

AngularJS 单元测试(二)详解_AngularJS

使用对象模拟注入 我们可以非常容易的使用angularjs的$provider服务用一个对象模拟一个依赖并且注入. 例子如下 angular.module('artists',[]). factory('Artists',['imageStore',function(imageStore){ return { thumb:function(){ return imageStore.thumbnailUrl(id) } } }]) 如何实现 如何确定了服务 1.创建一个URL的引用,稍后会被moc

AngularJS 单元测试(一)详解_AngularJS

AngularJS单元测试 网上有很多单元测试的教程,比如如何安装jasmine和ngMock,大家可以搜一下.这里就不在说了.下面重点介绍一个单元测试的过程. 加载一个模块 AngularJS用module来包括应用不同的部分比如controllers,services, filters.为了测试不同的部分,我们需要一个不同模块的引用,并且加载它.Angularjs模块注入使用ngMock模块.ngMock模块能够注入服务service进入单元测试. ngMock暴露出angular.mock

AngularJs $parse、$eval和$observe、$watch详解_AngularJS

$parse和$eval $parse和$eval这两个函数都可以解析表达式的值. 它们的区别在于$parse是一个服务, 可以注入使用. $eval是scope对象上的一个方法, 我们只能在能访问scope的场景下使用它. var getter = $parse('user.name'); var setter = getter.assign; var context = {user: {name: 'John Doe'}; var locals = {user: {name: 'Doe Jo