Unable to load the templates AngularJS - javascript

I am trying to load templates in angular but get an error:
Failed to load resource: net::ERR_FILE_NOT_FOUND angular.js:102 Error:
[$compile:tpload]
http://errors.angularjs.org/1.3.15/$compile/tpload?p0=pages%2Fhome.html
at Error (native)
at file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:6:417
at file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:137:25
at file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:112:113
at n.$eval (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:126:15)
at n.$digest (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:123:106)
at n.$apply (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:126:293)
at l (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:81:240)
at M (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:85:342)
at XMLHttpRequest.e (file:///C:/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:86:418)
Here's my index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="weatherApp">
<head>
<title>AngularJS Weather Forecast SPA</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
html, body, input, select, textarea
{
font-size: 1.05em !important;
}
</style>
<!-- load angular via CDN -->
<script src="http://code.angularjs.org/1.3.0-rc.2/angular.min.js"></script>
<script src="http://code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.3.0-rc.2/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS Weather</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
// MODULE
var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource']);
// ROUTES
weatherApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.htm',
controller: 'homeController'
})
.when('/forecast', {
templateUrl: 'pages/forecast.htm',
controller: 'forecastController'
})
});
// CONTROLLERS
weatherApp.controller('homeController', ['$scope', function($scope) {
}]);
weatherApp.controller('forecastController', ['$scope', function($scope) {
}]);
I tried to use WAMP server to load the pages from, but still get the same error.

Currently your template protocol contains file:// which would not accessible through your browser.
You need to host your code on some server(like IIS, WAMP, etc.) & paste your whole code directory on the server, in order to work your code. Other wise your code looks fine.
So the URL should be either http:// or https:// then your template will fetch from server directly.

Use https or http in URL .Example:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

Related

In AngularJS, loaded content by ui-view cannot read javascript file in parent content

I want to insert header and nav bar into index.html
When header and nav bar are in index.html, My app works well.
but seperate these files to html and try to load, ui-view do not load script files.
So logout function does not work when ui-view loaed header.html
On the other hand, css works well.
I tried to follow answers like
Angularjs does not load scripts within ng-view
or
html partial is not loaded into ui-view
but it did not help to fix my problem..
Why this situation occurred?
Please any handsome or pretty developer help me..
These are my code.
app.js
'use strict';
var mainApp = angular
.module('adminApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.router'
]);
mainApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/admin/login');
$stateProvider
.state('root',{
url: '',
abstract: true,
views: {
'headerContainer': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl',
controllerAs: 'header'
},
'navContainer':{
templateUrl: 'views/nav.html',
controller: 'NavCtrl',
controllerAs: 'nav'
}
}
})
.state('root.login', {
...
})
});
index.html
<!DOCTYPE html>
<html ng-app="adminApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>
<base href="/">
<!-- CSS-->
<link href="bower_components/bootstrap/dist/css/main.css" rel="stylesheet">
<!-- Font-icon css-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- start: Favicon -->
<link href="favicon.ico" rel="shortcut icon">
<!-- end: Favicon -->
</head>
<body class="sidebar-mini fixed" ng-controller="AppCtrl">
<div class="wrapper">
<div ui-view="headerContainer"></div>
<div ui-view="navContainer"></div>
<div ui-view="appContainer"></div>
</div>
<!-- Javascripts-->
<script src="../bower_components/bootstrap/dist/js/jquery-2.1.4.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>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/bootstrap/dist/js/main.js" ></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/headerCtrl.js"></script>
<script src="scripts/controllers/navCtrl.js"></script>
</body>
</html>
header.html
<header class="main-header hidden-print">
<nav class="navbar navbar-static-top">
<div class="navbar-custom-menu">
<ul class="top-nav">
<li>
<a ng-click="logout();">Logout</a>
</li>
</ul>
</div>
</nav>
</header>
headerCtrl.js
mainApp.controller('HeaderCtrl', function ($scope, $cookieStore) {
$scope.logout = function () {
angular.forEach($cookies.getAll(), function (v, k) {
$cookies.remove(k);
}); // This is for remove all cookies
};
});
main.js
$('.top-nav li a').on('click', function (e) {
console.log('Clicked header li');
});
It seems like you haven't used controller alias while calling logout method
ng-click="header.logout();"
As #pankaj said you need to declare the logout method on your controller alias
ng-click="header.logout();"
And the same applies for your js. You have to reference logout with this keyword since you are using controller as syntax
mainApp.controller('HeaderCtrl', function ($scope, $cookieStore) {
var vm =this;
vm.logout = function () {
angular.forEach($cookies.getAll(), function (v, k) {
$cookies.remove(k);
}); // This is for remove all cookies
};
});
For more Info: AngularJs "controller as" syntax - clarification?

angular routing not working in Visual Studio 2015

It seems that by asking this question, I am just beating a dead horse, but I have been through all the posts that I could find and still could not find an answer. I (and even a colleague) have spent countless hours trying to solve what seems to be a relatively basic concept. So , can I please get some help with my angularjs routing
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="foodApp">
<head>
<meta charset="utf-8" />
<title>What Do I Eat</title>
<link href="/app/css/app.css" rel="stylesheet" />
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/app/js/app.js"></script>
<script src="/app/js/controllers/ExistingRestaurantController.js"></script>
<script src="/app/js/controllers/NewExperienceController.js"></script>
<script src="/app/js/controllers/NewRestaurantController.js"></script>
<script src="/app/js/controllers/indexController.js"></script>
<script src="/app/js/services/RestaurantData.Service.js"></script>
</head>
<body>
<header class="container-fluid">
<h1>What Do I Eat</h1>
</header>
<div class="container-fluid">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>My Restaurants</li>
<li>Add Restaurant</li>
<li>Add Experience</li>
</ul>
</div>
</div>
<ng-view></ng-view>
</div>
<footer class="container-fluid">
whatever i want
</footer>
</body>
</html>
app.js:
'use strict';
var foodApp = angular.module('foodApp', ['ngResource', 'ngRoute']);
foodApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/myRest',
{
templateUrl: '/templates/ExistingRestaurant.html',
controller: 'ExistingRestaurantController'
})
.when('/addExp',
{
templateUrl: '/templates/NewExperience.html',
controller: 'NewExperienceController'
})
.when('/addRest',
{
templateUrl: '/templates/NewRestaurant.html',
controller: 'NewRestaurantController'
});
}
]);
ExistingRetaurantController.js
'use strict';
foodApp.controller('ExistingRestaurantController',
function ExistingRestaurantController($scope) {
$scope.restaurant = {
name: 'Cheesecake Factory',
food: 'Cheesecake',
price: 6.95
}
}
);
ExistingRestaurant.html:
<div class="container-fluid">
<h1>Existing Page!</h1>
</div>
I think the problem is the project structure. Index.html appears to be nested within app. I thought the easiest fix was to move index.html to the root of the project. So with a folder structure of:
I was able to getting working as follows..
In Index.html, I changed the links to be #!/ (hash-bang):
<!DOCTYPE html>
<html lang="en" ng-app="foodApp">
<head>
<meta charset="utf-8" />
<title>What Do I Eat</title>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/app/js/app.js"></script>
<script src="/app/js/controllers/ExistingRestaurantController.js"></script>
<script src="/app/js/controllers/NewExperienceController.js"></script>
<script src="/app/js/controllers/NewRestaurantController.js"></script>
</head>
<body>
<ul>
<li>My Restaurants</li>
<li>Add Restaurant</li>
<li>Add Experience</li>
</ul>
<ng-view></ng-view>
</body>
</html>
Then in app.js I added the $locationProvider and set the hash-prefix to !. (I don't know why it's called hashPrefix because I always think it's a suffix, given that it comes after the hash, but I can live with it.)
'use strict';
var foodApp = angular.module('foodApp', ['ngResource', 'ngRoute']);
foodApp.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix("!");
$routeProvider
.when('/myRest',
{
templateUrl: '/app/templates/ExistingRestaurant.html',
controller: 'ExistingRestaurantController'
})
.when('/addExp',
{
templateUrl: '/app/templates/NewExperience.html',
controller: 'NewExperienceController'
})
.when('/addRest',
{
templateUrl: '/app/templates/NewRestaurant.html',
controller: 'NewRestaurantController'
});
}
]);
Your start path then becomes:
http://localhost:63317/index.html
and changes to the following when clicking the links:
http://localhost:63317/index.html#!/myRest
http://localhost:63317/index.html#!/addRest
http://localhost:63317/index.html#!/addExp
Well after 4 days of searching, I finally figured out my own answer. I was using angular version 1.6.1. The moment I rolled it back to 1.2.1, everything worked fine. I shall continue to research to figure out best routing practices.
Try rolling your angular version back until it works.

Links not working with angular ui-router

So I've set up ui-router and I had it working a few minutes ago, sort of, it would display the template with content loaded from another html file, but none of the links would work. Now nothing is working: the template shows up but the content is not pulled in and none of the links work.
Ctrl.js
var site = angular.module('site', ['ui.router']);
site.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('page', {
url: '/page',
templateUrl: 'page.html',
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
});
$urlRouterProvider.otherwise('/page');
})
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="scripts/ctrl.js"></script>
<link rel="stylesheet" href="style/main.css">
</head>
<body ng-app="site">
<nav class="navbar navbar-default navbar-fixed-top" id="navigate">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navSmall">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navSmall">
<ul class="nav navbar-nav navbar-right">
<li>about</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center container-fluid">
<div ui-view></div>
</div>
<footer class="footer">
<div id="note" class="container">
<div class="row">
<div class="col-sm-8">
-----Footer Content-----
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</footer>
</body>
</html>
About.html (should be loaded but it's not)
<div ui-view="about">
<div class="container-fluid bg-about">
<div class="container-content">
<div class="row">
</div>
</div>
</div>
</div>
Wow you all are fast! Thanks for the suggestions. So update: changing it to ahref="#/about" helped in that I can now go to the link but still no content displays. There is a console error:
Error: Access to restricted URI denied
fg/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:103:167
n#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:98:460
m/g<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:95:489
e/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:130:409
uf/this.$get</m.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103
uf/this.$get</m.prototype.$digest#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:142:165
uf/this.$get</m.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:399
Ac/c/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:115
h/<.invoke#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:41:374
Ac/c#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:36
Ac#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:332
fe#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:20:156
#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:315:135
g/</j#https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29566
g/</k<#https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882
angular.min.js:117:399
Your state URL is /about, not /about.html.
In any case, use the ui-sref directive, that's what it's for
<a ui-sref="about">about</a>
You simply pass in the state name (and any params, see the documentation) and it will create the right URL for you taking into account any $locationProvider.html5mode configuration.
If you are loading the app via file:///some/path/to/index.html, the AJAX requests to your templates (ie about.html) might not work. You should be using an HTTP server for your local development.
Have a look at (or even just clone as a base) the angular-seed project. It provides an excellent starting point for first-time Angular development.
You are mistake the state URL
your code <li>about</li>
You can access the state by URL from browser, but referencing other section of the app is a bad practice though it still works
<li>about</li>
Do this
<li><a ui-sref="about">about</a></li>
your state URL is mistake, is /about not /about.html
Try this
<li><a ui-sref="about">about</a></li>
For link to work you need to use
about
instead of
about.
Also for content to pull in like data binding you need to use controller.
Try this, just make sure test.html be there.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
controller: 'myCtrl',
templateUrl: 'test.html'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("MainController", function($scope) {
});
module.controller("myCtrl", function($scope) {
$scope.my = 10;
ab = function() {
alert($scope.my);
}
});
</script>
</head>
<body ng-app="sampleApp">
<div ng-controller="MainController">
Route
<ng-view>
</ng-view>
</div>
</body>
</html>

Angular ngView not showing page

When I click on a link to load a ngView page, the html file does not get displayed.
I am not running the application through localhost, which I suspect could be the issue. I just opened index.html with Chrome, so perhaps ngRoute is missing some dependency?
router-app/
---index.html
---app.js
---pages/
-------home.html
-------about.html
-------contact.html
Anyways, here's my app.js
// app.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider){
$routeProvider
//route for home page
.when('/', {
templateURL: 'pages/home.html',
controller: 'mainController'
})
//route for home page
.when('/about', {
templateURL: 'pages/about.html',
controller: 'aboutController'
})
//route for home page
.when('/contact', {
templateURL: 'pages/contact.html',
controller: 'contactController'
})
//default route
.otherwise({
redirectTo: '/'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope){
$scope.message = 'Look! I am on the About page!';
});
scotchApp.controller('contactController', function($scope){
$scope.message = 'Shoutout! I am on the Contact page!';
});
And here is index.html
<!-- index.html -->
<!DOCTYPE html>
<html ng-app='scotchApp'>
<head>
<BASE href="/Users/Khan/Desktop/router-app/">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
<meta charset='utf-8'>
<base href='/'>
</head>
<body>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
I am very curious as to what is going on, if anyone knows. Thank you for your help! :)
Remove the leading slash from your template url,
/Pages/about.html
Should become
Pages/about.html

AngularJS templates not loading/rendering

So I'm trying to run an Angular app with a Rails API on Chrome.
I'm trying to render very simple views from their respective controllers.
My users.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/users', {
templateUrl: '/views/users.html',
controller: 'UsersCtrl'
});
}])
.controller('UsersCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('http://localhost:3000/api/users/').success(function(data) {
$scope.users = data.users;
});
$scope.foos = ['foo', 'bar', 'baz'];
}]);
users.html view:
<div ng-controller='UsersCtrl'>
<h1>Users</h1>
<ul ng-repeat="user in users">
<li>{{user.first_name}}</li>
</ul>
<ul ng-repeat="foo in foos">
<li>{{foo}}</li>
</ul>
</div>
The users page renders fine, and I get all the data I want. But when I try to load my main page, I get nothing. No errors, just a blank screen (though the navbar and everything else I have in my index.html loads properly).
My main.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/views/main.html',
controller: 'MainCtrl'
});
}])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.awesomeThings = [
'foo',
'bar',
'baz'
];
$scope.addThing = function() {
$scope.awesomeThings.push($scope.newThing);
$scope.newThing = '';
};
}]);
main.html view:
<div ng-controller="MainCtrl">
<form ng-submit='addThing()'>
<div class="form-horizontal">
<input type="text" ng-model="newThing">
<input type="submit" value="Add Thing">
</div>
</form>
<li ng-repeat='thing in awesomeThings'>
{{thing}}
</li>
<h4>Awesome things: {{awesomeThings}}</h4>
<h4>Cool things: {{coolThings}}</h4>
</div>
When I look at the inspector in the Network tab for the "/users" route, it loads users.html. This doesn't happen for the "/" route. I expect it to load main.html, but I get nothing.
The strange thing is, when I copy all of my code from my main.js and just throw it into my users.js, everything works fine. This told me maybe I wasn't loading it properly into the index.html page, but it seems to me that I am.
index.html:
(scripts are at the bottom)
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="rantlyApp">
<header class='nav-header' role='navigation'>
<div class='content'>
<a class="navbar-brand" href="#/">Rantly</a>
<nav>
Rants
Users
Styleguide
Sign Up
</nav>
</div>
</header>
<div class="container">
<div ng-view=""></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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<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/services.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/users.js"></script>
<script src="scripts/controllers/about.js"></script>
</body>
</html>
I'm extremely new to Angular so it's quite possible I'm missing a fundamental step in setting up the controllers. Since my code works based purely off of which file I have it in, I have a feeling I'm not configuring something properly in Angular.
Any help is greatly appreciated. Thanks!
When you write
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
You are creating a new module called rantlyApp and removing any old module with the same name. So when the users.js script runs it overwrites what you defined in main.js.
Instead define your module once, and retrieve it with:
var rantlyApp = angular.module('rantlyApp');
Check the documentation.

Categories