angular学习笔记---通过angular/cli建一个新的项目

理一下基于angular/cli建立新项目的思路:

(1)安装nodejs

(2)安装git

(3)安装淘宝镜像cnpm

(4)安装@angular/cli,在管理员模式下运行:cnpm install -g @angular/cli

(5)测试@angular/cl是否安装成功,运行:ng

(6)选择一个目标文件夹,进入该文件夹,如首先进入e盘:e:     ,其次进入e盘下的test文件夹:cd test   ,再在该文件夹下建立一个项目:ng new project

此时,项目建好之后会自动安装依赖,因为默认选择npm安装会比较慢或缺失相关文件,这里可以选择Ctrl+C,结束掉默认安装依赖行为,选择用cnpm进行依赖安装,即cnpm install,会根据package.json文件中的依赖包,下载安装相应的依赖。ps:安装好的依赖在node-modules中,需要将node_modules放置在.gitignore下,如下图,则提交版本库时,该目录中的文件都会被忽略掉。

(7)启动项目,运行:ng serve,启动成功后浏览器输入url:http://localhost:4200

到此,一个基于angular的项目已经建立好了

时间: 2024-08-04 19:21:18

angular学习笔记---通过angular/cli建一个新的项目的相关文章

angular学习笔记02 angular指令大全

第一步 先要引入angular, 第二步  在 html 标签中<html  ng-app>  加入ng-app(这是个必须的,不然会报错) 接下来就可以去使用angular的各种指令了. //js文件  js语法需要注意 在网上的写法有很多,最好是按标准的写法来写,不然js代码经过压缩就不能使用了(很重要) 压缩代码会出错,不压缩的话还是能运行的,原因是压缩代码会把关键字替换,因此 angular 在定义的时候需要这样. angular.module('antsins.controllers

angular学习笔记(三十)-指令(9)-一个简单的指令示例

学了前面这么多关于指令的知识,现在就用指令来写一个小组件:expander 这个组件的功能就是点击开展菜单,再点击收起菜单: ↑↓点击展开收起 下面来看它的代码: html: <!DOCTYPE html> <html ng-app="expanderModule"> <head> <title>20.9 指令-expander</title> <meta charset="utf-8"> &l

angular学习笔记(三十)-指令(10)-require和controller

本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐directive> <inner‐directive></inner‐directive> </outer‐directive> 这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素. js: app.directiv

angular学习笔记(八)

本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素 ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素 (其实只要用到其中一个就可以了) 下面来看个简单的例子,点击按钮可以显示/隐藏元素: <!DOCTYPE html> <html ng-app> <head> <title>

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource

angular学习笔记(二十三)-$http(1)-api

之前说到的$http.get和$http.post,都是基于$http的快捷方式.下面来说说完整的$http: $http(config) $http接受一个json格式的参数config: config的格式如下: { method:字符串 , url:字符串, params:json对象, data:请求数据, headers:请求头, transformRequest:函数,转换post请求的数据的格式, transformResponse:函数,转换响应到的数据的格式, cache:布尔

angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构

在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要的功能有: 可以通过id来获取用户123的指定id的卡     'GET'  'card/user/123/id' 可以获取用户123的所有的银行卡             'GET'  'card/user/123' 可以更新用户123的指定id的卡                'POST' '

angular学习笔记(九)-css类和样式3

再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: <!DOCTYPE html> <html ng-app> <head> <title>6.3css类和样式</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="scri

angular学习笔记(九)-css类和样式2

在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框. 错误框的类名是.err,警告框的类名是.warn: <!DOCTYPE html> <html ng-app> <head> <title>6.2css类和样式</title> <