I am using intellij and it created a template for me. I am trying to use:
app.config(function($routeProvider, $locationProvider) {
to direct my pages. However currently the default index page in rendering. This is just my attempt to figure out how things are connecting.
configuration.js
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/',{
templateUrl: "app/pages/mainPage/mainPage.html",
controller:"mainPageController"
});
$routeProvider.otherwise({redirectTo: '/view1'});
});
mainPage.html
<div>
<h2>Hello World</h2>
</div>
index.html
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="pages/mainPage/mainPageController.js"></script>
<script src="configuration.js"></script>
</body>
</html>
app.js
// Declare app level module which depends on views, and components
var app = angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]);
view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute'])
//.config(['$routeProvider', function($routeProvider) {
// $routeProvider.when('/view1', {
// templateUrl: 'view1/view1.html',
// controller: 'View1Ctrl'
// });
//}])
.controller('View1Ctrl', [function() {
}]);
view2.js
'use strict';
angular.module('myApp.view2', ['ngRoute'])
//.config(['$routeProvider', function($routeProvider) {
// $routeProvider.when('/view2', {
// templateUrl: 'view2/view2.html',
// controller: 'View2Ctrl'
// });
//}])
.controller('View2Ctrl', [function() {
}]);
I am trying to render mainPage.html and handle all the redirects in one file i.e configuration.js
Related
I can't get my angular app to route without changing the web page. I'm trying to get the page to change without refreshing and appear in the ng-view, but instead the console is throwing errors. See pastebin for errors http://pastebin.com/kTYwviSv
app.js
var myApp = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/page1.html', {
templateUrl: 'page1.html'
})
.when('/page2.html', {
templateUrl: 'page2.html'
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
}]);
index.html
<!DOCTYPE html>
<head>
<title>Testing Angular On My Own</title>
</head>
<body ng-app="myApp">
{{"Hello"}}
<br>
<br>
<a ng-href="page1.html">Page 1</a>
<a ng-href="page2.html">Page 2</a>
<div ng-view></div>
<script src="bower_components/bower-angularjs/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
page1.html
This is Page 1
page2.html
This is Page 2
I was just trying to make the angular bootstrapping work where I want to get my app loaded only after retrieving some data from the server using the service call. However I am not able to make this work with the $routeprovider. My routes doesn't work after this bootstrapping. can anyone know what is wrong I am doing here???
var myApp = angular.module('myApp', [ 'ngRoute', 'ui.bootstrap',
'dataHandler', 'underscore','ngAnimate', 'angular-loading-bar' ]);
fetchData();
function fetchData() {
var initInjector = angular.injector(["ng"]);
var $http = initInjector.get("$http");
return $http.get("/path/to/data.json").then(function(response) {
bootstrapApplication();
}, function(errorResponse) {
// Handle error case
bootstrapApplication();
});
}
function bootstrapApplication() {
angular.element(document).ready(function() {
myApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
redirectTo : '/dashboard'
}).when('/dashboard', {
menuItem: 'DASHBOARD',
templateUrl : '../views/customer/dashboard/customerDashboard.html',
controller : 'CustomerDashboardControllerPT',
controllerAs : 'custdashboard'
}).otherwise({
redirectTo : '/'
});
//$locationProvider.html5Mode(true);
}]);
angular.bootstrap(document, ["myApp"]);
});
}
It seems it doesn't recognize my MainController also. In my html file I have code like:
<div class="container" ng-controller="MainController as main">
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>
<script type="text/javascript"
src="../frameworks/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript"
src="../frameworks/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="../frameworks/angular/angular.min.js"></script>
<script type="text/javascript"
src="../frameworks/angular/angular-route.js"></script>
<script type="text/javascript" src="../frameworks/angular/angular-animate.js"></script>
<script type="text/javascript" src="../frameworks/angular/ui-bootstrap.js"></script>
<script type="text/javascript" src="../frameworks/underscore/underscore.js"></script>
<script type="text/javascript" src="../frameworks/moment/moment.min.js"></script>
<script type="text/javascript" src="../frameworks/angular/loading-bar.js"></script>
<script type="text/javascript" src="../js/controllers/MainController.js"></script>
I'm getting the following error:
Failed to instantiate module ContactsApp due to:
TypeError: undefined is not a function
When I comment out html5mode in app.js the error goes away, and when I navigate to /contacts the views/list.html template doesn't load. I'm fairly new to angular so I think I'm just overlooking something simple and I'm not quite sure how to trouble shoot it.
app.js:
angular.module('ContactsApp', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/contacts', {
controller: 'ListController',
templateUrl: 'views/list.html'
});
$locationProvider.html5mode(true);
});
HTML:
<html ng-app="ContactsApp">
<head>
<title>Contacts</title>
<base href="/" />
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Contacts</h1>
</div>
<div class="row">
<div class="col-sm-12" ng-view></div>
</div>
</div>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</body>
</html>
It's html5Mode (capital 'M').
angular.module('ContactsApp', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/contacts', {
controller: 'ListController',
templateUrl: 'views/list.html'
});
$locationProvider.html5Mode(true);
});
in Index.html i defined:
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bwp">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="app/landingController.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
In app.js i defined:
var app = angular.module("bwp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when(
'/main', {
templateUrl: 'app/test.html',
controller: 'testController'
})
.otherwise({ redirectTo: '/main' });
});
Here is the complete testController.js:
(function() {
var app = angular.module("bwp");
var landingController = function ($scope, $http) {
$scope.test = "this is a test";
};
app.controller("landingController", landingController);
}());
In test view I defined:
<h1 ng-controller="landingController">
{{test}}
</h1>
When i render the page i get (through inspect element):
<h1 ng-controller="landingController" class="ng-scope ng-binding">
{{test}}
</h1>
Note that it identifies the controller and the scope.
SO...Angular injects the view but doesn't bind $scope.test as expected. What am I doing wrong?
I'm working on a new Angularjs webapp where I have to use ngRoute. I'm a bit confused first, because routing doesn't work at all in my case – I always end up at index and MainCtrl.
in index.html I've included all dependencies like so:
<body ng-app="orderyourselfApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container" ng-controller="LoginCtrl">{{hello}}</div>Soem random stuff
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js(app) 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/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.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/navbar.js"></script>
<!-- endbuild -->
</body>
And I have the routes set up in app.js
'use strict';
angular.module('orderyourselfApp', [
'ngResource',
'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/main',
controller: 'MainCtrl'
})
.when('/login', {
templateUrl: 'login',
controller: 'LoginCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
And ofcourse, main.js looks like this:
'use strict';
angular.module('orderyourselfApp')
.controller('LoginCtrl', function ($scope, $http) {
console.log('saysomething');
$scope.hello = 'Hello world! LoginCtrl';
})
.controller('MainCtrl', function ($scope, $http) {
console.log('shit is getting real');
$http.get('/api/awesomeThings').success(function(awesomeThings) {
$scope.awesomeThings = awesomeThings;
});
});
Now, the issue is weird and simple: when I do a localhost:9000/login, I should get to the login.html template and LoginCtrl, but no. I keep ending up at index and MainCtrl and nothing seems to change the result.
login.html
<body ng-app="orderyourselfApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container" ng-controller="LoginCtrl">{{hello}}</div> … then the usual stuff
Where's this going wrong?
First off, templateUrl should point to your actual partial's relative path, for example: templateUrl: 'partials/login.html'.
Then, I think you should first land on http://localhost:9000/ and then follow a link to http://localhost:9000/login
Anyway, you partials should not contain the ng-app declaration (they actually are partial). So you should have an index.html that would define your page's template, and two partials: main.html and login.html, neither of which should contain the ng-app declaration.
Ending in something like this:
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/main.html',
controller: 'MainCtrl'
})
.when('/login', {
templateUrl: 'partials/login.html',
controller: 'LoginCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
With index.html being the page's landing from http://localhost:9000/