angularjs路由、添加

最新推荐文章于 2024-05-08 09:50:52 发布
最新推荐文章于 2024-05-08 09:50:52 发布
阅读量316 收藏
点赞数 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="angularjs/angular.js" ></script>
		<script type="text/javascript" src="angularjs/angular-route.js" ></script>
		<script>
			var app=angular.module("myApp",["ngRoute"]);
			app.config(["$routeProvider",function($routeProvider){
                $routeProvider
              
                .when("/addUser",{
                    templateUrl:"addUser.html",
                    controller:"addUserCtrl"
                })
           
            }]);
				app.controller("myCtrl",function($scope,$location){
				
				$scope.users = [
					{"name":"张三","pwd":"后卫","age":11,"sex":"999","state":false},
					{"name":"李四","pwd":"大前锋","age":21,"sex":"888","state":false},
					{"name":"王五","pwd":"小前锋","age":23,"sex":"777","state":false}
				];
				 $scope.goToUrl = function(url){
                        $location.path(url);
                };
				});
		app.controller("addUserCtrl",function($scope){
        
            $scope.a = "";
            $scope.b = "";
            $scope.c = "";
            $scope.d = "";
        
            
            //提交按钮的点击事件
            $scope.tijiao = function(){
                var flag = true;
                //拿到各个输入框的值
                if($scope.a==""||$scope.a==null){
                    alert("姓名不能为空");
                    flag = false;
                }
                if($scope.b==""||$scope.b==null){
                    alert("位置不能为空");
                    flag = false;
                }
                if($scope.c==""||$scope.c==null){
                    alert("球号不能为空");
                    flag = false;
                }
                if($scope.d==""||$scope.d==null){
                    alert("票数不能为空");
                    flag = false;
                }
                
             
                if(flag){
               
                $scope.duixiang ={
                    name:$scope.a,
                    pwd:$scope.b,
                    age:$scope.c,
                    sex:$scope.d,
                    state:false
                };
                $scope.users.push($scope.duixiang);
                }
            };
            
            });
				  
               
		</script>
		<script>
			
			
		</script>
	</head>
	  <body ng-app="myApp" ng-controller="myCtrl">

			<div>
		<p>查询</p>
  <input type="text" ng-model="yhmchaxun" size="28"/>
  </div>  <div style="width:800px;height:800px;float:right ; margin-top: -75px;">
		<p>排序</p>			
  <select ng-model="b"> 
     <option value="">升序</option>
     <option value="-">降序</option>
    </select>	
		</div>
 <br />
<button ng-click="goToUrl('/addUser')" style=" background:blue;">新增成员</button><br />
<br />
 <div>
				<table border="1" cellspacing="1" cellpadding="10">
					<thead>
						<tr>
						
						
							<th>姓名</th>
							<th>位置</th>
							<th>球号</th>
							<th>票数</th>
					
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="user in users|filter:{name:yhmchaxun}|orderBy:b+a">
							
					
							<td>{{user.name }}</td>
							<td>{{user.pwd}}</td>
							<td>{{user.age }}</td>
							<td>{{user.sex}}</td>
							
						</tr>
					</tbody>
					
					
				</table>
			</div><br />
        <br />
         <div ng-view="">
         	
         </div>
          <script type="text/ng-template" id="addUser.html">
    <table border="1" cellpadding="10" cellspacing="1">
                <tbody>
                    <tr>
                        <th>姓名:</th>
            <td><input type="text" ng-model="a"></td>
                    </tr>
                    <tr>
                        <th>位置:</th>
            <td><input type="text" ng-model="b"></td>
                    </tr>
                    <tr>
                        <th>球号:</th>
            <td><input type="text" ng-model="c"></td>
                    </tr>
                    <tr>
                        <th>票数:</th>
            <td><input type="text" ng-model="d"></td>
                    </tr>
                    
                    <tr>
                      
                    <tr align="center">
                        <td colspan="2">
        <input type="button" value="提交" ng-click="tijiao()" />
                        </td>
                    </tr>
                </tbody>
            </table>
            </script>
        <br />
	</body>
</html>

葛村野人
关注
Angular 动态添加 Tab 标签（通过路由实现）
02-24
通过使用路由来实现 Angular 动态添加 Tab 标签的效果。
AngularJs路由与添加用户(2)
guoleisb10的博客
10-23 227
var app=angular.module("myApp",["ngRoute"]); app.config(["$routeProvider",function($routeProvider){                 $routeProvider                                .when("/addUser",{
Angular 添加路由
weixin_30721899的博客
08-04 112
var app=angular.module('kaifanla',['ng','ngRoute']);app.config(function($routeProvider){ //添加路由 $routeProvider .when('/文件名',{ templateUrl:'tpl/start.html', controller:'startCtrl' ...
第一个 Angular 项目 - 添加路由
GoldenaArcher的博客
03-06 1227
前置项目是，之前的切换页面使用的是ngIf对渲染的组件进行判断，从而完成渲染。这一步的打算是添加路由，同时添加 edit recipe 的功能(同样通过路由实现)
angular创建路由
leejongsuk009的博客
09-05 1964
angular 路由相关配置
angularjs路由
01-31
在本“AngularJS路由”示例中，我们将探讨如何设置和使用AngularJS的路由系统。 首先，我们需要引入AngularJS库和`ngRoute`模块。`ngRoute`是AngularJS官方提供的路由模块，提供了一套完整的路由解决方案。在HTML...
AngularJS路由删除#符号解决的办法
10-19
AngularJS路由技术在单页应用（SPA）开发中十分常见，其核心思想是通过改变浏览器地址栏中的URL，而不重新加载页面，来更新视图内容。AngularJS默认使用URL的哈希部分（即URL中的#符号后的内容）来追踪路由，这种...
AngularJS 路由route 0217Demo
02-20
AngularJS 是一个强大的JavaScript框架，主要用于构建单页应用程序（SPA，Single Page Applications）。...在实际项目中，熟练掌握AngularJS路由的使用能够帮助我们构建出高效、可维护的前端应用。
AngularJS路由Ui-router模块用法示例
10-19
在AngularJS中，路由扮演着关键角色，它允许用户在不刷新整个页面的情况下导航到不同的视图。当涉及到更复杂的视图结构和嵌套时，AngularJS原生的`ngRoute`模块可能显得力不从心，这就是`UI-Router`模块的用武之地。...
Angular路由配置
Create_mylife的博客
11-01 260
官方文档 配置路由文件 import { Routes } from '@angular/router'； import { HomeComponent } from'./home.component'; import { CompanyComponent } from'./company.component' impogt { rootRouting } from './root.routing...
Angular7多标签页实现(路由复用+路由懒加载)完美解决方案
04-08
Angular7多标签页实现(路由复用+路由懒加载)完美解决方案
Angular建立简单路由(一)
wind的博客
06-17 420
已经建好一个Angular项目： 其他总结：安装指定版本的ng-zorro-antd与echarts（项目文件夹下） npm install ng-zorro-antd@7.2.0 --save npm install echarts@4.1.0 --save 开始~ 1.在app文件夹下，新建组件start和second，终端执行命令 ng generate component start ng generate component second 2.在app-routing.module.t
Angular中的路由
最新发布
GeGe&YoYo的博客
05-08 853
在Angular中，路由是用于在不同的视图和组件之间导航的机制。Angular提供了一种强大的路由机制来管理单页应用（SPA）中的导航。Angular 路由允许你定义应用的不同视图，并且可以在这些视图之间无缝地切换，而不需要重新加载整个页面。
angularjsl路由_AngularJS实现路由实例
weixin_39640909的博客
12-20 176
1、首先我们要引进angular.js和angular-route.js文件2、然后我们要在html中创建锚点和容器(ng-view) 第一页 第二页 3、在模块中注入ngRoute依赖angular.module('myApp',['ngRoute'])4、配置路由config(['$routeProvider',function ($routeProvider) {$routeProvide...
cms php angularjs,AngularJS动态路由
weixin_34020067的博客
03-22 96
我目前有一个内置路由的AngularJS应用程序。它可以正常工作，并且一切正常。我的app.js文件如下所示：angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).config(['$routeProvider', function ($routeProvider) {$routeProvi...
Angular 路由配置
God$Sun的博客
07-13 2529
Angular 路由配置
Angular 学习 - 配置路由
qq_43891916的博客
09-07 400
有道笔记链接： http://note.youdao.com/noteshare?id=52765d27363d1f755880a2f7d4b311ed&sub=22BCDE71E07E4A8E9B2EDC86BB7B8868 一、配置routes的文件 文件路径：src/app/app-routing.module.ts 二、加载Angular routes模块 文件路径：src/app/app.module.ts 三、全局间接加载路由模块 文件路径：src/main.ts 路由的配置就到
angularjsl路由_angularjs——路由篇
weixin_39945679的博客
12-20 120
路由路由功能是由 routeProvider服务 和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。一般主要通过两个方法：when()：配置路径和参数;otherwise：配置其他的路径跳转，可以想成default。when的第二个参数：contro...
Angular学习笔记六之路由
weixin_45855469的博客
05-31 939
使用到该路由守卫的组件类中应该定义一个名称相同的方法，用来告诉路由守卫能不能离开当前页面，在路由守卫中调用这个方法来决定返回值是什么。路由模块懒加载可以实现用户首次请求应用的时候只请求根模块，其他模块等用户访问的时候再加载，优化用户体验。一个路由可以应用多个守卫，所有守卫都允许，路由才可以访问。是一个接口，我们需要自定义一个路由守卫类，路由守卫类要实现这个接口。中，定义子级路由的跳转链接并且给子级路由定义路由插座。路由守卫会告诉路由是否允许导航到请求的路由。在定义路由的时候，通过路由的。
AngularJS路由实战：页面跳转详解
`ng-view`元素是AngularJS路由系统插入视图的地方。 然后，我们需要创建一个AngularJS模块，并注入`ngRoute`依赖。模块是AngularJS应用程序的基础，它可以包含控制器、服务、指令等组件。在本例中，我们将创建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值