哇距离上次总结已经一个月了(默默改成月总结),之前周总结没写的当然是因为电脑被偷了,后来没写当然是没了电脑心情不好,现在来写总结当然是因为电脑被人民警察(超腻害)追回来了,再加上目前我比较闲,结果赶巧正好一个月呢。这月悟出一道理:人生在世全靠自学呀,同志们。
1.Angular js
哇前端甩锅没人做了,尝试学习angular js前端框架,发现菜鸟教程整得不错呢,还有慕课网不怎么好用(唉搞技术之后连小象学院都用不着了,伤感一秒)。
Angular js是一款js框架,是一个以js编写的库。它通过<script>标签添加到HTML页面,通过指令扩展了HTML,且通过表达式绑定数据到HTML。AngularJS通过ng-directives扩展了HTML。ng-app指令定义一个AngularJS应用程序,ng-model指令把元素值绑定到应用程序,ng-bind指令把应用程序数据绑定到HTML视图。
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
ng-app指令告诉AngularJS:<div>元素是AngularJS应用程序的“所有者”,ng-model指令把输入域的值绑定到应用程序变量name,ng-bind指令把应用程序变量name绑定到某个段落的innerHTML。
AngularJS使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。它把应用程序数据绑定到HTML元素,可以克隆和重复HTML元素,可以隐藏和显示HTML元素,可以在HTML元素“背后”添加代码,并且支持输入验证。
- AngularJS指令
AngularJS指令是以ng作为前缀的HTML属性,ng-app指令初始化一个AngularJS应用程序,ng-init指令初始化AngularJS应用程序变量(通常情况下不使用ng-init,将使用一个控制器或模块来代替它),ng-model指令绑定HTML元素到应用程序数据。ng-repeat指令对于集合中的每一项会克隆一次HTML元素。
<div ng-app="" ng-init="name='Sugar'">
<p>姓名为 <span ng-bind="name"></span></p>
</div>
除了AngularJS内置的指令外,我们还可以创建自定义指令,使用.directive函数来添加自定义的指令,要调用自定义指令,HTML元素上需要添加自定义指令名。使用驼峰法来命名一个指令,myDirective使用时需要以-分割,即my-directive:
<body ng-app="myApp">
<my-directive></my-directive>
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
- AngularJS表达式
<div ng-app="" ng-init="person={firstName:'Fish',lastName:'Sugar'}">
<p>姓为 {{ person.lastName }}</p>
</div>
使用ng-bind:
<div ng-app="" ng-init="points=[1,6,8,3,9]">
<p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>
- AngularJS应用
<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= "Fish";
$scope.lastName= "Sugar";
});
</script>
- AngularJS Scope(作用域)
要明确Scope对应的作用域是哪一个。所有的应用都有一个$rootScope,它可以作用在ng-app指令包含的所有HTML元素中,即作用在整个应用,可以在各个controller中使用。
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["One", "Two", "Three"];
$rootScope.lastname = "Sugar";
});
</script>
- AngularJS 控制器
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "Fish";
$scope.lastName = "Sugar";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
- AngularJS 过滤器
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
自定义过滤器reverse,将字符串反转:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "FishSugar";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
- AngularJS 服务(Service)
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
使用自定义服务:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
- AngularJS事件
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我!</button>
<p>{{ count }}</p>
</div>
- AngularJS模块
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
- AngularJS 动画
AngularJS提供了动画效果,可配合CSS使用,使用动画需引入angular-animate.min.js库。ngAnimate模型可添加或移除class,它并不能使HTML元素产生动画,但她会检测事件,类似隐藏显示HTML元素,如果事件发生ngAnimate就会使用预定义的class来设置HTML元素的动画。
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
<body ng-app="ngAnimate">
动画是通过改变HTML元素产生的动态变化效果。应用已经设置应用名时可把ngAnimate直接添加在模型中:
<body ng-app="myApp">
<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
- AngularJS 依赖注入
AngularJS用来作为依赖注入的核心组件:value、factory、service、provide、constant。
- AngularJS 路由
每个URL都有对应的试图和控制器。AngularJS $routeProvider用来定义路由规则。AngularJS模块的config函数用于配置路由规则,$routeProvider提供when(path,object)&otherwise(object)函数按顺序定义所有路由。第一个参数是URL或者URL正则规则,第二个参数是路由配置对象。
2. 正则表达式
匹配非某字符串时:
((?!win).)* 表示匹配除单词win的其它所有字符