时间:2021-07-01 10:21:17 帮助过:5人阅读
本篇文章主要的讲述了关于angularjs的搭建入门的项目。有兴趣的同学可以进来看看,实验很多代码大家可以试试看的。
AngularJS 是一个 JavaScript 框架。AngularJS 通过 指令 扩展了 HTML.且通过 表达式 实现页面与js数据的双向绑定。主体采用开发人员非常熟识的MVC(model、view、controller)模式,采用路由(route)模式实现单页面跳转(Ps:AngularJS 模块的 config 函数用于配置路由规则)。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
详情请查阅:PHP中文网AngularJS开发手册。
PS:如有使用eclipse的开发人员可:
<!doctype html><!--html 元素是 AngularJS 应用: ng-app="myApp" 的容器 --><html ng-app="myApp"><head> <!-- 所有资源脚本引用需在index页面,如果在子页面引用将失效 1、一次性全在html加载 2、用oclazyload插件 3、自己使用angular的$q 写一个加载文件的服务 --> <script src="js/lib/angular.min.js"></script> <script src="js/lib/angular-route.js"></script> <script src="js/utils/url.js"></script> <script src="js/utils/selfmd5.js"></script> <script src="js/utils/toast.js"></script> <script type="text/javascript" src="js/lib/jquery.min.js"></script> <script src="js/controller/indexController.js"></script> <script src="js/controller/homeController.js"></script> <script src="js/service/HttpService.js"></script></head><!--body是 HTML 页面中控制器: ng-controller="indexController" 的作用域--><body ng-controller="indexController"><p> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <!--数据绑定--> <h1>Hello {{yourName}}!</h1> <!--p 是 HTML 页面中视图: ng-view 的作用域子页面注入区(PS:本人理解)--> <p ng-view> </p></p></body></html>
/** * Created by Administrator on 2017/12/1. */ //应用程序声明以及将controller、service等放入容器中(PS:类似于SpringMvc的IOC容器)var myApp = angular.module('myApp',["ngRoute",'homeController','httpService']);//控制器声明myApp.controller('indexController', ['$scope',function($scope) { //数据绑定 $scope.yourName= 'Hola!'; //ng-view监听 $scope.$on("$viewContentLoaded",function(){ console.log("ng-view content loaded!"); }); $scope.$on("$routeChangeStart",function(event,next,current){ //event.preventDefault(); //cancel url change console.log("route change start!"); }); }]);//模块的 config 函数用于配置路由规则myApp.config(function($routeProvider, $locationProvider) { $routeProvider .when('/home', { templateUrl: 'content/homepage.html', //如果路由对页面指明了controller,页面无需使用ng-controller="homeController"声明,否则将会 //出现homeController多次调用 controller: 'homeController' }) .otherwise({ redirectTo: '/home' }); });
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>SingleCase</title></head><body ><!--数据绑定--> <input ng-model="user.account"/> <!-- <input ng-model="user.password"/>--> <input ng-model="user.pwd"/> <!--事件绑定--><input type="button" ng-click="login()"><!--列表遍历--><ul ng-repeat="menu in menus"> <li ng-click="menu_2Show(menu.lid)" >{{menu.name}} <ul ng-repeat="menu_list in menu.menu_list" style="display: none" id="menu_2{{menu.lid}}"> <li ng-click="menu_2Click(menu_list.name)"> {{menu_list.name}}</li> </ul> </li></ul></body></html>
/** * Created by Administrator on 2017/12/1. */angular.module("homeController",["ngRoute"]) <!--注入service等工具--> .controller("homeController",function($scope,$route,httpService,$location){ <!--声明modle进行数据绑定--> $scope.user={account:'',password:'',pwd:''}; <!--对密码进行MD5加密--> $scope.user.password = hex_md5($scope.user.pwd); <!--登陆方法--> $scope.login=function(){ <!--调用封装的post请求--> httpService.postReq( $scope.user,'/loginbusiness/login','用户登陆!').then(function(data){ if(data.code>0){ //controller中进行路由跳转 $location.path("/home"); }else{ //Android效果toast alerToast(data.code+':'+data.msg,2000); } }); }; $scope.role={role:0}; $scope.menus=null; httpService.postReq( $scope.role,'','用户登陆!').then(function(data){ $scope.menus=data.data; }); $scope.menu_2Click=function(name){ alerToast(name,2000); } $scope.menu_2Show=function(lid){ $('#menu_2'+lid).show(); } });
/** * Created by Administrator on 2017/9/28. */angular.module("httpService",[])//请求头设置 PS:可写 拦截器 全局$http注入loading效果 .config(["$httpProvider", function ($httpProvider) { //更改 Content-Type $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8"; $httpProvider.defaults.headers.post["Accept"] = "*/*"; $httpProvider.defaults.transformRequest = function (data) { //把JSON数据转换成字符串形式 if (data !== undefined) { return $.param(data); } return data; }; }]) .service('httpService', function( $http,$q) { //生成deferred异步对象 var deferred=$q.defer(); this.postReq = function(reqdata,api,msg) { console.log(msg+":start!"); $http({ method: "POST", url: lh_business_url+api, headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' }, data:reqdata }).success(function(data, status) { console.log(data); //执行到这里时,改变deferred状态为执行成功,返回data为从后台取到的数据,可以继续执行then,done deferred.resolve( data); }). error(function(data, status) { alert('连接服务器出错!'); //执行到这里时,改变deferred状态为执行失败,返回data为报错,可以继续执行fail // deferred.reject('连接服务器出错!'); }); console.log(msg+":end!"); //起到保护作用,不允许函数外部改变函数内的deferred状态 return deferred.promise; }; this.getReq = function(data,api,msg) { console.log(msg+":start!"); $http.get(lh_business_url+api, { params:data }).success(function (data) { console.log(data); // 如果连接成功,延时返回给调用者 deferred.resolve(data); }) .error(function () { alert('连接服务器出错!'); // deferred.reject('连接服务器出错!'); }); console.log(msg+":end!"); return deferred.promise; }; });
本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。
以上就是AngularJS怎么搭建简单的项目?angularjs的功能实现(附完整实例)的详细内容,更多请关注Gxl网其它相关文章!