@student2018 2018-10-13T08:39:05.000000Z 字数 6328 阅读 554

MEAN and Angular 基础知识

前端

AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。

AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
ng-init 指令初始化 AngularJS 应用程序变量。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
ng-app指令指明了应用, ng-controller 指明了控制器。

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类
在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。$ rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
AngularJS 过滤器可用于转换数据：
过滤器描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。 AngularJS$ interval 服务对应了 JS window.setInterval 函数。
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

```javascript
$http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 });$ http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback); ``` ng-hide 指令用于设置应用部分是否可见。 ng-hide="true" 设置 HTML 元素不可见。 ng-hide="false" 设置 HTML 元素可见。 ng-show 指令可用于设置应用中的一部分是否可见。 ng-show="false" 可以设置 HTML 元素不可见。 ng-show="true" 可以以设置 HTML 元素可见。模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。 JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。 AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。$ dirty 表单有填写记录
$valid 字段内容合法的$ invalid 字段内容是非法的
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页 Web 应用（single page web application，SPA）。
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把 $routeProvider注入到我们的配置函数并且使用$ routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。

https://blog.csdn.net/wzj0808/article/details/51810797
web app比较流行的趋势angular+node，或者react+backbone/flux+node。
AngularJS做前端，NodeJS做服务端，MongoDB做数据库。
MEAN全栈主要由四项技术组成:
MongoDB：用来存储数据的数据库。
Express.js：服务器端用来构建Web应用的后端框架。
AngularJS：用来构建Web应用的前端框架。
Node.js：JavaScript运行环境。
个MEAN全栈技术所要处理的大多是JSON数据结构，而MongoDB中的文档对象也是JSON格式，通过RESTful API获取到的后台数据也是JSON格式，正是这些一致的JSON格式，才省去了格式之间的转换，从而提高了开发效率。
node不是一个银弹。它是专为I/O密集型操作和快速构建可扩展性的实时网络应用而设计的。比如说一些在线游戏，协作工具，聊天系统等。通过node，你可以用最少的系统资源来服务大量的客户端，这就是为什么它为高可扩展性而设计。
根结node的结构特点，它应该避免用于CPU密集型操作。本教程中我将从实例开始介绍node而不是从架构深入讲解node以及为什么它不适用与CPU密集型应用。
通过mean，你可以将文档数据以json对象的格式存储在mongo中，然后通过基于node和express搭建的RESTful API服务器的来操作它们。通过Angular构建客户端来操作这些API并渲染视图给用户。这意味着你在你的代码中，你将使用单一的统一的语言（javascript），结果就是让代码更加具有一致性和可维护性。另外的好处就是，你将花费更少的时间来处理JSON和其它格式之间的转换。所有这些将导致更好的性能和更高的开发效率。

关闭mongodb服务
　mongod -f ./mongodb.conf --shutdown
　use dbname#从这里开始下文中所有的dbname都是自己新建的数据库的名称
　db #查看当前选择的数据库
show dbs #查看所有的数据库
db.dropDatabase() #删除当前数据库
db.creatCollection("ccname") #ccname同dbname一样为自己剪的集合
db.creatCollection("ccname",{capped:true,autoIndexID:true,size:10000,max:10000})
其实在 MongoDB 中，你不需要创建集合。当你插入一些文档时，MongoDB 会自动创建集合。
db.ccname.insert({'name':'李华','age':18})
db.ccname.insert({'name':'李华','age':20})
db.ccname.remove({'name':'李华'})#删除所有name=李华的文档
db.ccname.update({'name':'李华','age':18},{$set:{'age':22,'sex':'男'}})

db.ccname.update({'name':'李华'},{$set:{'age':20,'sex':'男'},{multi:true}})

db.ccname.find() #查询集合中所有文档
db.ccname.find({"name":"李华","age":20}).pretty()
其中pretty可以时输出的数据更容易查看
db.getCollectionNames() #查看当前数据库中有哪些collection
能不能查找年龄大于２０岁的人？
Monk是一个用来读写MongoDB的Node模块。
安装monk：
npm install monk --save
--save参数告诉NPM将这个依赖加入到package.json文件中。
npm install -g express-generator
express Vidzy
cd Vidzy
npm install
NPM将参照 package.json 文件中定义的依赖。然后它将从NPM仓库中下载这些依赖到一个叫做 node_modules 的目录中。
npm install monk --save
Nodemon，这个模块在检测到源文件修改时自动重启web服务器。
从控制台进入Vidzy目录输入以下命令：
nodemon
Nodemon将在3000端口上启动你的web服务器。你可能会看到一个弹出窗口显示Node正在侦听连接。

render：用来渲染视图
send：用来发送文本内容到客户端
json：发送json对象到客户端
redirect：重定向客户端到另一个地址

Node回调函数的标准协议模式——“错误优先”。在这个模式中，回调函数的第1个参数是一个错误对象，第2个参数才是返回结果。当你开发更多的Node应用的时候，你将发现更多的这种回调模式。

var collection = db.get('videos');
collection.find({}, function(err, videos){
    if (err) throw err;
    res.json(videos);
});

app.use('/api/videos', videos);
这一行代码的作用就是让 videos 模块给任何以 /api/vides开头的路由使用。
nodejs默认使用jade作为模板引擎
script(src='//cdn.bootcss.com/angular.js/1.4.5/angular.js')
script(src='//cdn.bootcss.com/angular.js/1.4.5/angular-resource.js')
script(src='//cdn.bootcss.com/angular.js/1.4.5/angular-route.js')
第1个是Angular框架的主脚本，第2个是用来调用RESTful　APIs，第3个是用来管理路由的。

确保他们的缩进空格数相等，因为jad对缩进空格非常敏感确保他们的缩进空格数相等，因为jad对缩进空格非常敏感。Express Generator生成Jade视图的时候将会把两个空格当做缩进。所以你需要遵循同样的缩进并且不能省略。否则将会报错。

app.config(['$routeProvider', function($routeProvider){

}]);
div(ng-view)
添加了一个带有 ng-view 的 div。
这个属性告诉Angular在当前dom下渲染视图。通过这个设置，用户首次进入主页时，Jade视图将会在服务端渲染并且返回给客户端。

app.controller('HomeCtrl', ['$scope', '$resource',
function($scope, $resource){

}]);

这里我们使用 app 模块提供的 controller 方法来定义一个新的控制器。
第1个参数是1个字符串，用来定义控制器的名称。按照管理，我们通常在Angular控制器名末尾添加 Ctrl。
第2个参数是数组。这个数组可以引用0个或更多的字符串，每个代表了1个控制器的依赖。这里定义了依赖 $scope 和resource。这些都是Angular的内部服务，所以她们都有一个前缀”$ ”。
$scope用来传递数据给视图，$ resource用来调用RESTful API。数组中最后一个对象是函数，这个函数就是控制器的主体。
query哪里来的？

router.post('/', function(req, res){
var collection = db.get('videos');
collection.insert({
    title: req.body.title,
    description: req.body.description
}, function(err, video){
    if (err) throw err;
    res.json(video);
});

});
这个方法的第1个参数是一个JSON对象，它有两个属性： title 和 description。我们用req.body 从这些属性中读取值。它代表数据将被提交到请求的body中。
如果是post方法，就可以使用req.body.attr
如果是get方法，就可以使用req.params.attr来获取参数信息。
{ id: '@_id' }

这里 ‘@_id’ 告诉Angular在请求对象中查找一个叫做 _id 的属性。

link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
添加bootstrap引用

https://blog.csdn.net/viewyu12345/article/details/79131956
主题是有关angular的路由的，非常不错。

MEAN and Angular 基础知识

内容目录