Hi!
I am using AngularJS with grunt and I have 2 views besides the
index.html:Login.html and Register.html.I have created a controller for
each view:LoginCtrl and RegisterCtrl.My problem is that for some reason the
property in RegisterCtrl won't display properly in Register.html, instead
if I assign the same property to index.html it works fine.I have no idea
why it has this behaviour and I am hoping someone can help me figure out
the problem.This is the code for app.js:
'use strict';
/**
* @ngdoc overview
* @name firstApp
* @description
* # firstApp
*
* Main module of the application.
*/
angular
.module('firstApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/register', {
templateUrl: 'views/register.html',
controller: 'RegisterCtrl',
controllerAs: 'register'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
This is the register.html:
<p>This is the register view</p>
<div class="a">
<div ng-controller="RegisterCtrl">
{{ greeting }}
</div>
</div>
And register.js:
'use strict';
var app = angular.module('firstApp',[]);
app.controller('RegisterCtrl',['$scope', function ($scope) {
$scope.greeting ='Hola';
}]);
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<base href="/" />
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href=
"bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="firstApp">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong>
browser. Please <a href="http://browsehappy.com/";>upgrade your browser</a>
to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">first</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a ng-href="views/login.html">Login</a></li>
<li><a href="views/register.html">Register</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman
team</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function
(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.
createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script',
'https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></
script>
<script src="bower_components/angular-cookies/angular-cookies.js"></
script>
<script src="bower_components/angular-resource/angular-resource.js"></
script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></
script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/register.js"></script>
<script src="scripts/controllers/login.js"></script>
<!-- endbuild -->
</body>
</html>
Any help would be appreciated!
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/54fd91fe-69ae-489f-b9a0-b55fee91b1b5%40googlegroups.com.
