Question

我正在使用角度js，我正在尝试使用路由提供程序在单个页面应用程序上加载多个html页面。但是我宣布我的模块，控制器和我的html中有一个按钮，发送到控制器将html重定向到新的部分。我做错了什么？

PS。我不确定导入是如何工作的，如果我在一个html中使用它我是否在另一个中获取它？为什么我只能将一个模块导入一个文件如果我将它导入两个单独的HTML文件，我会收到一个注射器错误。

//module.js

var mainM = angular.module('mainM', ['ngRoute', 'ngResource']);

mainM.config(["$routeProvider"], function($routeProvider))
{
	$routeProvider
	.when('/', 
	{
		controller: "homeController",
		templateUrl : 'index.html'
	})
	.when('/signIn', 
	{
		controller: "controllSignIn",
		templateUrl : 'partials/MainPage/signIn.html'
	})
	.when('Website/index.html', 
	{
		controller: "controllSignUp",
		templateUrl : 'partials/MainPage/signUp.html'
	})
	.when('/newProject', 
	{
		controller: "controllNewProejct",
		templateUrl : 'partials/MainPage/newProject.html'
	})
}

//End of config routing -------------------------------------------------------

//Controllers
mainM.controller('controllSignUp', function($scope)
{
	//Submit Data for sign up
$scope.credentials = [
	{word: "Testing"},
	{word: "Hello"}	
	]
	
	$scope.changeView = function () 
	{
        $location.path('/partials/MainPage/signUp.html');
		//$scope.uname += "123";
		alert('called');
    };
});

<!DOCTYPE html>

<!-- Sign up-->

<html lang = "en" ng-app ="mainM">

<head>
	<title>Project Buddy</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>   
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
	
	<script src="/scripts/module.js"></script>
	<link rel="stylesheet" href="css/signUp.css" />
</head>

<body data-ng-app = "mainM">
	<div data-ng-controller="controllSignUp">
	<center>
		<!-- Sign Up -->
		<form action = "http://www.google.com/formsubmission" method = "POST">
		  
		  <label>Username:</label>
          <input type="text" ng-model="uname" placeholder="Enter username" />
		  </br>
		  <label>Email Address:</label>
          <input type="text" ng-model="ename" placeholder="Enter email address" />
		  </br>
		  <label>Password:</label>
          <input type="password" ng-model="psw1" placeholder="Enter Password" />
		  </br>
		  <label>Confirm Password:</label>
          <input type="password" ng-model="psw2" placeholder="Enter Password" />
		  
          
          <button type="button" ng-click="signUpUser()">Sign Up</button>		
		</form >
	</center>
	</div>
</body>

</html>

<!DOCTYPE html>
<!-- index -->
<html lang = "en">

<head>
	<title>Project Buddy</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>   
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
</head>

<body>
	<!-- Drop down menu -->
	<div id = "dropDown" ng-controller = "controllSignUp">
		<button id = "SignUp" ng-click="changeView()">Sign Up</button><br/>
	</div>
</body>

</html>

AngularJS使用routeprovider

0 个答案: