如何使用角JS +表达JS入门搭建网站

介绍

这期内容当中小编将会给大家带来有关如何使用角JS +表达JS入门搭建网站,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

月份开始,接到了新的任务,跟UI开发有关,用的是角JS,表达JS等技术。于是周末顺便学习下新技术。

<强>组里产品UI架构如下:

如何使用角JS +表达JS入门搭建网站

其中前端,主要使用角JS框架,另外配合引导提供的很多控件以及JQuery,后台主要是表达JS搭建的Web服务器,表达JS配合Nginx使用非常方便。

由此在项目不忙的时候,自己于是有时间和兴趣学习一下角JS与表达JS。

同时自己实现了一个最简单的角JS +表达JS的网站示例。

<强>,一。角JS

角JS是由谷歌员工开发,后由谷歌维护的一个项目,官网为:https://angularjs.org/上面有详细的文档,可以下载* * *的版本1.4和稳定版1.3.15。

简单来讲,角JS是一个作用在前端Javascript的框架。它的两大特点是通过指令扩展了Html,并且通过表达式绑定数据到Html。同时提供了控制器,滤过滤器、工厂等服务。

角JS因为作用在前端,所以可以和任何服务器技术相结合,与表达JS就是很好的结合。

角JS的产生为了解决静态网页操作DOM的弊端,适用于开发动态网络应用。

<>强角JS的原理可通过下图了解:

如何使用角JS +表达JS入门搭建网站

网上入门学习的资料也很多,这里不予赘述。但介绍一下角JS的几个重要概念:

<强> 1。控制器控制器

要动态操作网页中的数据,我们可以针对Html页面编写控制器、控制器本质是一个Javascript方法,例如我们可以针对每一个Html页面,写一个对应的Javascript方法做控制器,来控制页面中的数据。如下:

<强> index . Html

 & lt; ! doctype  html>, & lt; html  ng-app=癿yApp"在,,,,,& lt; head>,,,,,,,,, & lt; https://www.yisu.com/zixun/script  src=" lib/angular-1.3.15/angular.js ">                     

Hello {{name}}

这是一个Angular JS控制编写的页面,指定Angular JS的app为myApp,注意看其中的表达式,{{name}},name就是一个动态变量。那name的值从何而来?就是要在对应的控制器中给name赋值,从来用户访问index.html页面时可看到name真实的值。

controller.js

// Declare angular JS level module wich depends on filters, and services var myControllers = angular.module('myControllers', []);  // controller myControllers.controller('indexContrl', ['$scope', function ($scope) {     $scope.name = "Kevin"; }]);

在controller.js中,我们定义了一个indexContrl的控制器,这个控制器来给index.html中的name赋值。当然我觉得真实开发中,控制器的代码肯定会很多,建议每一个像indexContrl的控制器单独放在一个JS文件中,这样规范,好维护。

那有一个问题,indexContrl如何与index.html关联起来?Angular JS怎么知道我们要用indexContrl来控制index.html?

这里有两种方式,一是在index.html中直接指定,


Hello {{name}}


但这种方式,对于大型网站来说,太麻烦。建议使用另外一种方式,就是用Angular JS的另一个Module ng-route,做路由控制,针对不同的路径,在同一个文件中定义好各自的控制器。如下:

myAngularApp.js

// Declare angular JS level module wich depends on filters, and services var myApp = angular.module('myApp', [ 'ngRoute', 'myControllers']);  // route myApp.config(['$routeProvider',     function($routeProvider) {         $routeProvider.         when(                 '/',                 {                     templateUrl: 'index.html',                     controller: 'indexContrl'                 }         ).         otherwise( {             redirectTo: '/404'         });     } ]);

如何使用角JS +表达JS入门搭建网站