17-4-12月总结 (AngularJS、正则匹配非某字符)

最新推荐文章于 2023-01-11 14:53:15 发布

糖小豆子

最新推荐文章于 2023-01-11 14:53:15 发布

阅读量2.9k

点赞数 1

分类专栏： Summary

本文链接：https://blog.csdn.net/sugar_girl/article/details/70142678

版权

Summary 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

哇距离上次总结已经一个月了(默默改成月总结)，之前周总结没写的当然是因为电脑被偷了，后来没写当然是没了电脑心情不好，现在来写总结当然是因为电脑被人民警察(超腻害)追回来了，再加上目前我比较闲，结果赶巧正好一个月呢。这月悟出一道理：人生在世全靠自学呀，同志们。

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表达式

AngularJS表达式写在双大括号内：{{expression}}。表达式把数据绑定到HTML，这与ng-bind指令很像。AngularJS将在表达式写的位置“输出”数据。AngularJS对象就像JavaScript对象：

<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应用

模块定义了AngularJS应用，控制器用于控制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= "Fish";
    $scope.lastName= "Sugar";
});
</script>

AngularJS Scope(作用域)

Scope(作用域)是应用在HTML（视图）和JavaScript(控制器)之间的纽带。Scope是一个JavaScript对象，带有的属性和方法可在视图和控制器中使用。

要明确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 控制器

AngularJS应用程序被控制器控制，ng-controller指令定义了应用程序控制器，控制器是Javascript对象，由标准Javascript对象的构造函数创建。AngularJS使用$scope对象来调用控制器，控制器的$scope(相当于作用域、控制范围)用来保存AngularJS Model的对象。

<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 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。例如：uppercase过滤器将字符串格式化为大写：

<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)

使用内建服务：$location，$http，$timeout，$interval，还可以创建自定义服务。创建名为hexafy的访问：

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

使用自定义服务：

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

AngularJS事件

AngularJS自己的HTML事件指令：ng-click指令定义了AngularJS点击事件，ng-hide指令用于设置应用部分是否可见（ng-hide="true"设置HTML元素不可见），ng-show指令可用于设置应用中的一部分是否可见（ng-show="false"设置HTML元素不可见）。

<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 依赖注入

依赖注入（Dependency Injection）是一种软件设计模式，在这种模式下一个或者更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。该模式分离了客户端依赖本身行为的创建，使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。（没事你不要来找我，有事我会去找你）

AngularJS用来作为依赖注入的核心组件：value、factory、service、provide、constant。

AngularJS 路由

AngularJS路由允许我们通过不同的URL访问不同内容，通过AngularJS可以实现多视图的单页Web应用（SPA），在单页Web应用中AngularJS通过#+标记实现。

每个URL都有对应的试图和控制器。AngularJS $routeProvider用来定义路由规则。AngularJS模块的config函数用于配置路由规则，$routeProvider提供when(path,object)&otherwise(object)函数按顺序定义所有路由。第一个参数是URL或者URL正则规则，第二个参数是路由配置对象。