Newbie with AngularJS here.
I have an index.html file below, which references an Javascript file named app.js. The index.html file is as below:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="controller1.js"></script>
</head>
<body>
<h1>Github Viewers</h1>
<div ng-view></div>
</body>
</html>
In my app.js file, I have the following codes:
(function(){
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "controller1"
})
.otherwise({redirectTo: "/main"});
});
}());
I've set breakpoints (in Chrome Dev Tools) on the line:
templateUrl: "main.html",
But I am unable to get into this line.
Console Window shows no errors, so I am a little stumped.
Appreciate any insight on where to look further on this.
You are using the wrong app name.
Change <html ng-app="myApp"> to <html ng-app="githubViewer">
Edit
You cannot put a breakpoint in that line (templateUrl: "main.html"). Note that's an Object definition and not a function:
{
templateUrl: "main.html",
controller: "controller1"
}
And like all Objects, they are defined in an atomic operation. It's like if all its properties were created at once, meaning that you cannot "break" the execution for a specific property.
I've tested with Chrome dev tools and it doesn't even allow me to set a breakpoint in that line. Not sure how you did it...
If you want to check if the "main.html" template is being loaded, watch the network tab of the Chrome dev tools.
I think your dependency injection is missing controller1 module..
if you managing controllers in different module you have to inject it in your app.js
//controller1.js
angular.module('controllers',[])
.controller('controller1',function(....)
//app.js
var app = angular.module("myApp", ["controllers","ngRoute"]);
...
//index.html
...
<script src="controller1.js"></script>
<script src="app.js"></script>
...
Related
I am making a simple angular application (I have worked with angular a bit before), but I have encountered an error which I can't seem to get rid of. This is what the application is as of now -
<!DOCTYPE html>
<html ng-app="moduleName">
<head>
<base href="/">
<title>Altigreen</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
</head>
<body>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>
Where, my app.js is this -
angular.module('moduleName', ['ngRoute'])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'views/home.html'
});
}]);
And my home.html is just one line of text, so that's that. But I get this error everytime I try to load the page. It says failed to load module and displays a blank page.
Help will be appreciated, thanks!
Ok this is my first attempt at this. Trying to get my page to load. my App.js file has all the nessities I hope. here are my files below:
Index.html:
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.9.0.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<title>Amazing Todo List</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
App.js:
var TodoApp = angular.module("TodoApp", ["ngResource", "ngRoute"]).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
List.html:
<h1>Hello: {{test}}</h1>
I am currently running the Localhost server via Visual Studio 2013. Please Help, Thanks!
You would need to include ngRoute inorder to use angular routing. So include ngRoute in your module as a dependency.
var TodoApp = angular.module("TodoApp", ["ngResource", "ngRoute"]).
config(.....
Also remember to include angular-route.js unless you are using very old version of angular that comes with routing as well. You can refer to the cdn http://code.angularjs.org/x.y.z/angular-route.js or download the file.
Plnkr
I'm trying to build a simple AngularApp Here. I'm trying to add routeProvider and use config for the same. But the page never worked as expected. When I tried using fireBug in firefox, I found that the function present in the config, was never invoked. So, the code inside it remains untouched. (I was able to confirm that with breakpoints).
I believe that I'm missing something trivial here. Please help me figure it out.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/kscApp.js"></script>
</head>
<body>
<div ng-app="navbar">
<nav-bar></nav-bar>
</div>
<div ng-app="kscapp">
<ul>
<li> Home </li>
<li> Contact </li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
kscapp.js
//Define an angular module for our app
var sampleApp = angular.module('kscapp',[]);
//Define Routing for app
//STACKOVERFLOW: The function is not getting invoked here. Please feel free to use firebug to verify the same.
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}).
when('/Contact', {
templateUrl: 'templates/contact.html',
controller: 'ContactCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]);
sampleApp.controller('HomeCtrl', function($scope) {
console.log('inside Hc');
});
sampleApp.controller('ContactCtrl', function($scope) {
console.log('inside Cc');
});
navbar.js
var navBarModule = angular.module('navbar', []);
navBarModule.directive('navBar', function() {
return {
scope: {},
templateUrl: 'templates/navbar.html'
};
});
EDIT: I had two ng-app in the source. I removed the navBar, and now things start to work fine. Can someone explain to me why this behaviour is seen? Both modules are independent of each other.
You don't inject the ng route module.It should be
var sampleApp = angular.module('kscapp',['ngRoute']);
You are using different versions for Angular.min.js and Angular-route.min.js.
update your angular-route from 1.2.9 to 1.3.8
Also inject 'ngRoute' to kscapp module.
You can only use 'ng-app' once in your application.
Concider moving your ng-app="kscapp" up to the html tag, and update kscapp to:
var sampleApp = angular.module('kscapp',['ngRoute', 'navbar']);
For more on ngApp, read ngApp API.
I want to be able to quickly build an AngularJS application using ui-router without having to set up a server. So that I can send this folder to anyone and the application will still work.
I have tried putting a # infront of the route as adviced here. I have also tried to follow other advice related to the ngroute, but nothing seems to work and since I want to use ui-router rather than ng-route I'm not sure whether the advice is even applicable to my situation.
I have also tried to create a manifest file to store the files offline according to this page.
In firefox it kind of works but for some reason it double up what is on the index.html page. But in chrome which is my preferred browser it doesn't work at all. I get an error about a failed ajax call; why don't the manifest file download all pages straight away?
How should I accomplish building an AngularJS app with ui-router without needing a server?
Here is simple snippet of my code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app" manifest="mycache.manifest">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<a ui-sref="home.messages">Messages</a>
<div ui-view></div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="js/routes.js"></script>
<script src="js/main.js"></script>
</body>
</html>
messages.html
<button ng-click="contextCtrl.getAllMessages()">Get Messages</button>
<div ng-repeat="message in contextCtrl.messages">
{{message}}
</div>
routes.js
'use strict';
angular.module('app', ['ui.router']);
//Setting up route
angular.module('app').config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'index.html',
controller: 'ContextCtrl',
controllerAs:'contextCtrl'
})
.state('home.messages', {
url: '/messages',
templateUrl: 'messages.html',
controller: 'ContextCtrl',
controllerAs:'contextCtrl'
});
}
]);
main.js
'use strict';
/*jslint latedef:false*/
//Controller declaration
angular.module('app').controller('ContextCtrl', ContextCtrl);
function ContextCtrl() {
var vm = this;
vm.messages = [];
vm.getAllMessages = getAllMessages;
function getAllMessages(){
vm.messages = ['m1', 'm2', 'm3', 'm4'];
};
}
mycache.manifest
CACHE MANIFEST
js/main.js
js/routes.js
messages.html
bower_components/angular-ui-router/release/angular-ui-router.js
bower_components/angular/angular.js
I have recently started learning angularJS and ran into an issue with ng-view directive. Apologies if this question is too naive.
This is my index.html file. As you can see, I am using ng-view directive to abstract out some html code from index.html file.
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
<meta charset="utf-8">
<title>My first app!</title>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/directives.js"> </script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
This is my app.js file. I am using the same partial template for all the urls.
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/searchbox.html', controller: PhoneListCtrl}).
otherwise({templateUrl: 'partials/searchbox.html', controller: PhoneListCtrl});
}]);
and this is my searchbox.html
<div id="container">
<input type="text" name="s" id="s" float-up="{perspective: '100px', x: '150%'}"/>
</div>
and finally this is my directives.js file:
'use strict';
var myAppModule = angular.module('phonecat', []);
myAppModule.directive('floatUp', function() {
return {
// Restrict it to be an attribute in this case
restrict: 'A',
// responsible for registering DOM listeners as well as updating the DOM
link: function($scope, element, attrs) {
console.log("test successful");
}
};
});
When I run this in the browser, the link function of my floatUp directive is never invoked.
When I see the rendered html of my index.html page, I get this (Note that ng-view didn't substitute the searchbox html):
<!DOCTYPE html>
<html class="ng-scope" lang="en" ng-app="phonecat">
<head>
<meta charset="utf-8">
<title>My first app!</title>
<script src="lib/angular/angular.js">
<style type="text/css">
<script src="js/app.js">
<script src="js/directives.js">
</head>
<body>
<div ng-view=""></div>
</body>
</html>
Other observations:
When I remove the directives.js from the index.html file ng-view works perfect and searchbox shows up fine.
When I copy paste the searchbox.html content to the index.html file, the link function is invoked properly.
Is this a known issue? Do custom directives mess up with ng-view and make it futile. I assure you I did extensive googling before posting my question here but couldn't find any appropriate answer.
Move this line from the directives.js
var myAppModule = angular.module('phonecat', []);
to the top of app.js
That way you're always working with the same angular module instance instead of creating new instances of it.
All your controllers, directives, and configs will then be myApModule.controller (or .config, or .directive)
Also in the app.js the references to controller in the routes should be strings controller: 'PhoneListCtrl' as PhoneListCtrl is not defined yet.
Your controllers.js wasn't provided but could look something like this:
myAppModule.controller('PhoneListCtrl', ['$scope', function($scope) {
//Controller code here
}]);
apps.js would now look like this:
myAppModule.
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/searchbox.html', controller: 'PhoneListCtrl'}).
otherwise({templateUrl: 'partials/searchbox.html', controller: 'PhoneListCtrl'});
}]);