Hi I am working on the angular js 60ish min tutorial an am not able to figure out the routing functionality here is my code
Issue: When I open the html file nothing happens i do noy see any routing happening
view1.html and view2.html are in the same folder with main.html and angular.min.js file.
Please point the mistake in the code or how to debug this.
<!DOCTYPE HTML>
<HTML data-ng-app ="demoapp">
<head><title>New angular js app </title></head>
<body>
<div>
<div ng-view></div>
</div>
<script src = "angular.min.js"></script>
<script>
var demoapp = angular.module('demoapp',[]);
demoapp.config(function($routeProvider){
$routeProvider
.when('/view1',
{
controller:'SimpleController',
templateUrl:'view1.html'
})
.when('/view2',
{
controller:'SimpleController',
templateUrl:'view2.html'
})
.otherwise({ redirectTo:'/view1'});
});
demoapp.controller('SimpleController', function ($scope){
$scope.customers = [
{name:"ishan", city:"Delhi"},
{name:"Ankit", city:"New Delhi"},
{name:"subhash", city:"haridwar"},
];
$scope.addCustomer = function()
{
$scope.customers.push
({
name:$scope.newCustomer.name,
city:$scope.newCustomer.city
});
};
});
</script></body></html>
Since Angular 1.2 you have to include the route module.
var demoapp = angular.module('demoapp',['ngRoute']);
See the docs
Please open console on your browser to detect the errors. If any error is shown, you try to refer to the AngularJS Google CDN latest as follows:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
After this, if your code still isn't working fine, please turn on the Debug script on your browser to investigate more.
Please let me know if any problem still happens.
Hope this will help you!!
var demoapp = angular.module('demoapp',[ngRoute]);
don't forget Include the angular-route.js in your page
Related
I'm new to angularjs and followed the tutorial here from w3schools to create my first simple Angularjs app and it worked fine. After going through the official angularjs tutorial I decided to modularize my app but now its not working. Currently I m getting the error
"The controller with the name 'redController' is not registered."
I want to display a message in component 'red' using its controller. I tried altering many parts of the code only to get new errors and it seems I have messed up modularizing :|
I'm using v1.6.9
Here is my directory structure
app/
scripts/
angular.min.js
angular-route.js
blue/
blue.template.html
red/
red.template.html
red.module.js
red.component.js
app.config.js
app.module.js
index.html
and source files :
app.config.js
angular
.module("myApp", [ 'red','ngRoute' ])
.config(function($routeProvider) {
$routeProvider
.when("/red", {
templateUrl : "red/red.template.html",
controller: "redController"
})
.when("/blue", {
templateUrl : "blue/blue.template.html"
});
});
app.module.js
angular.module('myApp', [
'red',
'ngRoute'
]);
index.html
<!DOCTYPE html>
<html>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="red/red.module.js"></script>
<script src="red/red.component.js"></script>
<body ng-app="myApp">
Red
Blue
<div ng-view></div>
<p>Click on the links to navigate "</p>
</body>
</html>
red.template.html
<h1>red</h1>
<p>{{msg}}</p>hell
red.module.js
angular.module('red', [ 'ngRoute' ]);
red.component.js
angular.module('red').component('red',{
templateUrl: 'red/red.template.html',
controller: function redController() {
this.msg = "this is red";
console.log("Hi");
}
});
You are delcaring the module again and again in each .js files, declare only in one .js file and use it in rest of the fields.
change your red.module.js as,
angular.module('red', []);
your app.config.js should be as,
angular
.module("myApp")
.config(function($routeProvider) {
$routeProvider
.when("/red", {
templateUrl : "red/red.template.html",
controller: "redController"
})
.when("/blue", {
templateUrl : "blue/blue.template.html"
});
});
and change the order as follows,
<script src="red/red.module.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="red/red.component.js"></script>
Change red.component.js as follows
angular.module('red')
.component('red',{
templateUrl:
'red/red.template.html',
})
.controller("redController",function($scope)
{
$scope.msg ="This is red";
});
First of all, as #Sajeetharan you're defining the myApp module twice. Inside your app.config.js and also in app.module.js. If you use angular.module with 2 parameters angular.module('app', []) you're setting the module, if you use angular.module('app') it'll work as a getter. So, in your app.config.js you should use the getter to configure your app.
Once you did that, you can configure your route to something like this:
angular.module('myApp').config(function($routeProvider){
$routeProvider.when('/red', { template: '<red></red>'});
})
I would use this approach since you defined the component in another module.
If you still want to use the approach you've implemented to set both the templateUrl and controller in the $routeProvider, you'll have to change your red component declaration to something like this:
angular.module('red')
.component('red', { templateUrl: 'red/red.template.html'})
.controller('redController', function(){
this.msg = 'This is red.';
});
I'vent tested this second approach as for me the first makes more sense.
I am learning Angularjs and having problem with routing. I write up a very simple slim demo example which uses out of the box MVC5. The home page display fine but when I click on the About link it doesn't show the About page and AboutController break point is not hit. And got the following error in Console
Error: [$compile:tpload] Failed to load template: templates/indexView.html (HTTP status: 404 Not Found).
If I swap the two route, then my About page is displayed but got the error when clicking Home link so I am sure the html can be loaded. What do I need to do in order to get the routing to work?
Below is the index.cshtml
#{
ViewBag.Title = "Home Page";
ViewBag.InitModule = "homeIndex";
}
#section Scripts {
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/js/home-index.js"></script>
}
<div data-ng-view=""></div>
Below is the About.cshtml
#{
ViewBag.Title = "About Page";
ViewBag.InitModule = "homeIndex";
}
#section Scripts {
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/js/home-index.js"></script>
}
<div data-ng-view=""></div>
below is the home-index.js
// home-index.js
var module = angular.module("homeIndex", ["ngRoute"]);
var angularFormsApp = angular.module('homeIndex', ["ngRoute"]);
angularFormsApp.config(["$routeProvider",
function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "templates/indexView.html",
controller: "HomeController"
})
.when("/About", {
templateUrl: "templates/aboutView.html",
controller: "AboutController"
});
}]);
angularFormsApp.controller("HomeController",
["$scope",
function ($scope) {
var x = 1;
}]);
angularFormsApp.controller("AboutController",
["$scope",
function ($scope) {
var x = 1;
}]);
The var x=1 has no meaning just for me to set a break point.
Below is indexView.html
<h3>Arrived at Index Page</h3>
aboutView.html
<h3>About Page</h3>
I also have the below in the _Layout.cshtml html tag to hook in angular
data-ng-app="#ViewBag.InitModule"
The problem seems to be that MVC is handling the routing that you expect to be handled by Angular.
Have a look at this question for some more information about having Both AngularJS and MVC in the same project:
Should I be using both AngularJS and ASP.NET MVC?
Here is a nice guide to getting started using the two together, it specifically touches on the routing as well:
Getting started with AngularJS and ASP.NET MVC
I hope that helps, please let us know if you need more information, or if something is not clear.
I am trying to set up a project using gulp and browser sync with angularjs. I cannot get browser sync to work correctly when I use the ng-view tag in my index.html file. This is the error I get in my browser console when I run browser sync:
Uncaught TypeError: Cannot read property 'data1457531805746' of null
coming from browser-sync-client.2.11.1.js:204 It works as expected, page loads fine, when ng-view/ngRoute is not used.
These are my files:
./gulpfile.js
// Spin up a server
gulp.task('browserSync', function() {
browserSync.use(spa({
selector: "[ng-app]" //Only needed for angular apps
}));
browserSync.init({
port: 8080,
server: {
baseDir: path.src
}
})
});
// Watch for changes in files
gulp.task('watch', ['browserSync'], function() {
// Watch .js files -- removed for brevity
});
// Default Task
gulp.task('default', ['watch']);
./app/controllers/controllers.js
'use strict';
/* Controllers */
var dc4SearchControllers = angular.module('dc4SearchControllers', []);
dc4SearchControllers.controller('CompanySearchCtrl', ['$scope', '$http',
function($scope, $http){
$scope.test = 'Hello, world!';
}]);
./app/index.html
<html ng-app="dc4SearchApp">
<head>
<link href="/bower_components/webui-core/dist/webui-core.min.css" rel="stylesheet">
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"> </script>
<script src="/bower_components/lodash/lodash.min.js"></script>
<script src="/bower_components/webui-core/dist/webui-core.min.js"></script>
<script src="app.js"></script>
<script src="controllers/controllers.js"></script>
</head>
<body ng-view>
</body>
</html>
./app/app.js
'use strict';
/* App Module */
var dc4SearchApp = angular.module('dc4SearchApp', [
'ngRoute',
'dc4SearchControllers'
]);
dc4SearchApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/company-search', {
templateUrl: 'views/company-search.html',
controller: 'CompanySearchCtrl'
}).
otherwise({
redirectTo: '/company-search'
});
}]);
./app/views/company-search.html
<div ng-controller="CompanySearchCtrl">
{{test}}
<div class="spinner spin"> </div>
</div>
I am hoping this is just something silly and easy that I am over looking and haven't tried yet! Thanks in advance.
"Browsersync works by injecting an asynchronous script tag right after the body tag during initial request. In order for this to work properly the body tag must be present. Alternatively you can provide a custom rule for the snippet using snippetOptions"
https://www.npmjs.com/package/browser-sync
It seems Browsersync is reloading the body tag. Have you tried moving the ng-view to another child div ?
I am newbie to Angularjs. I am trying to create simple directive with the following code:
View:
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<user-info></user-info>
</div>
</body>
</html>
Controller:
myapp = angular.module("myapp", []);
myapp.directive('userInfo', function() {
var directive = {};
directive.restrict = 'E'; /* restrict this directive to elements */
directive.template = "My first directive: ";
return directive;
});
I am following this Tutorial to learn directive
http://tutorials.jenkov.com/angularjs/custom-directives.html
I am getting error:
http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fnomod%3Fp0%3DmyApp%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A6%3A417%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A412%0A%20%20%20%20at%20a%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A53)%0A%20%20%20%20at%20w.bootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A296)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A35%3A46%0A%20%20%20%20at%20s%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20ab%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A38%3A135)%0A%20%20%20%20at%20d%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381
Here is my codepen link
http://codepen.io/anon/pen/NGNKxz
You have error in the name of your app :
myapp = angular.module("myApp", []); // not 'myapp'
Add Your Directive
You need to add the directive to your html like so
<script src="path/to/your/directive.js"></script>
or if your working from one module you will link to the main module. But please restructure your app like this it will keep code up to standard and clean.
I have a git hub repo where I am building an app in this structure here. Best of luck.
Note
You are using angular min. Min is great for production because its small and faster to load but your in development at the moment so use the full version so you can capture errors better with the browser console.
Looks like you did not declare the controller myCtrl. Your directive looks fine.
myapp.controller('myCtrl', function() {
});
Is it the current version of your html file ?
Because you might need to link your controller, between head tags, insert :
<script src="the js file which contains your controller"></script>
or
<script>Your controller</script>
I am trying to get ng-route working with a google-apps-script web app. I have managed to get basic angular.js functionality working with google-apps-script, but I can't seem to get ng-route to work. I have placed ng-view tags inside a page and have included a separate JavaScript page that contains the routeProvider function.
The ng-view never gets rendered and as far as I can make out the routeProvider does not get called.
Can anyone offer any advice on using ng-route with google-apps-script or suggest another way of rendering a partial html page with google-apps-script
Any answers greatly appreciated.
Have simplified my code and added below:
Code.gs
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Index');
// Build and return HTML in IFRAME sandbox mode.
return template.evaluate()
.setTitle('Web App Window Title')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getScriptUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}
index.html
<!-- Use a templated HTML printing scriptlet to import common stylesheet. -->
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<html>
<body ng-app="myApp">
<h1>NG View</h1>
<ng-view></ng-view>
<p>angular check {{'is' + 'working!'}}</p>
<? var url = getScriptUrl();?>
<p id="urlid"><?=url?></p>
</body>
</html>
<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
Javascript.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-route.js"> </script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script>
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider){
console.log('routeProvider config');
var url = document.getElementById("urlid").innerHTML;
console.log('routeProvider config->' +url);
$routeProvider.when("/",
{
templateUrl: url+"?page=_app.html",
controller: "AppCtrl",
controllerAs: "app"
}
);
})
.controller('AppCtrl', function() {
var self = this;
self.message = "The app routing is working!";
});
</script>
_app.html
<div>
<h1>{{ app.message }}</h1>
</div>
When this runs angular check {{'is' + 'working!'}} works fine, but the ng-view does not get rendered the java console shows:
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.
The first obstacle is "sce"
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
Refer link https://docs.angularjs.org/api/ng/service/$sce#trustAsResourceUrl
For the purpose of investigation, I disabled sce (this is not recommended, though)
$sceProvider.enabled(false);
Now the error is shifted to XMLHttpRequest cannot load... No 'Access-Control-Allow-Origin' header is present on the requested resource.
XHR requests to the Google Apps Script server are forbidden
Refer link https://developers.google.com/apps-script/guides/html/restrictions
Google Apps is delivering the files from a different origin than the scripts.google.com and angular js client code is not able to fetch the partial htmls from the same origin.
I guess approach of ng-view is not feasible given the restrictions placed by google apps.
Here is the final modified code
<script>
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider,$sceProvider){
$sceProvider.enabled(false);
console.log('routeProvider config');
var url = document.getElementById("urlid").innerHTML;
console.log('routeProvider config->' +url);
$routeProvider.when("/",
{
templateUrl: url+"?page=_app.html",
controller: "AppCtrl",
controllerAs: "app"
}
);
})
.controller('AppCtrl', function() {
var self = this;
self.message = "The app routing is working!";
});
</script>
There has been some time since the question, but I'll post a reply either way.
If your partial html page is not too complicated and big, you can use template instead of templateUrl in the routeProvider, plus create a variable with the html you want to show. Something like this below:
var partial_page = "<span>partial page</span>"
$routeProvider.when("/",
{
template: partial_page,
controller: "AppCtrl",
controllerAs: "app"
}
It worked for me, but I wouldn't advise doing so for a complicated partial page as it may become difficult to read the code