Routing preventing controller from working - javascript

I’m developing a web application using AngularJS. I have a little problem. The view (html) can’t find the controller (js). So, I think this is caused by the routing in my app.js. The link to all the code can be found below. The pages are not loading well on plunker. So, I attached the images to this post.
Also, the code posted below is the index.html. http://plnkr.co/edit/CIQSZ0pow1Z9Pfsre1xO?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>Login</title>
<link href="app-content/app.css" rel="stylesheet" />
<!--<link href="css/generation-dialog.css" rel="stylesheet" />
<link href="css/image-collection-generation.css" rel="stylesheet" />
<link href="css/image-header.css" rel="stylesheet" />
<link href="css/mix-collections.css" rel="stylesheet" />-->
<link href="css/sidebar.css" rel="stylesheet" />
<link href="css/view-collections.css" rel="stylesheet" />
<link href="css/view-selected-collection.css" rel="stylesheet" />
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<div ng-view>
</div>
</div>
</div>
</div>
<!-- <script src="//code.jquery.com/jquery-2.0.3.min.js">
</script>-->
<script src="//code.angularjs.org/1.2.20/angular.js">
</script>
<script src="//code.angularjs.org/1.2.20/angular-route.js">
</script>
<script src="//code.angularjs.org/1.2.13/angular-cookies.js">
</script>
<script src="app.js">
</script>
<script src="app-services/authentication.service.js">
</script>
<script src="app-services/flash.service.js">
</script>
<!-- Real user service that uses an api -->
<!-- <script src="app-services/user.service.js">
</script> -->
<!-- Fake user service for demo that uses local storage -->
<script src="app-services/user.service.local-storage.js">
</script>
<script src="home.controller.js">
</script>
<script src="login.controller.js">
</script>
<script src="register.controller.js">
</script>
<!-- <script src="select/select.controller.js">
</script>-->
</body>
</html>
This is the error:
Error: [ng:areq] Argument 'MainCtrl' is not a function, got HomeController
angular.js:9997
So to sum it up, when the app routes to the select page, the angular controller is not recognized by the select page and I cannot add any functionalities. It is important to mention that the select page does work (and so does the controller) as a stand-alone page, but once I link the login page through ngRoute, the problem occurs.

Related

Angular JS; Invalid or unexpected token, Cannot read property 'module' of undefined and angular is not defined

For some reason I get these three errors when I publish my project to Azure. When I run the project on localhost these errors don't occur. I copied in the location where I declare my script files.
<head>
<meta charset="utf-8" />
<title>Sales Web App</title>
<link rel="stylesheet" href="CSS/Style.css" type="text/css" />
<!--<script src="../angular/angular.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!--<script src="../angular/angular-route.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="../js/jquery-3.2.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/additional-methods.js"></script>
<script src="JQuery/Script.js"></script>
<script src="Angular/app.js"></script>
</head>
<body ng-app="Sales">
<header ng-include="'Header.html'"></header>
<br />
<main ng-view></main>
</body>
From what I've read up my scripts all appear to be in the correct order.

Unable to load resource

I am just new to angularjs. I am trying to test simple controller in my index.html. But when i am running it on my localhost i am getting an error :
Failed to load resource: the server responded with a status of 404 (Not Found).
Here is my folder structure:
angulartesting
-bower_components
-index.html
-script.js
Here is my index.html file:
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="store">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body >
<div ng-controller="StoreController as store">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
</div>
<script src="bower_components/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Here is my script.js:
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
(function(){
var app = angular.module('store', []);
app.controller('StoreController',function(){
this.product=gem;
});
var gem = {
name:'Gaurav',
price:'220'
}
})();
Can anybody tell me what I am doing wrong?
I am running it on my local server.
Try this. I've just removed forward slashes before script sources and added ng-app attribute.
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- SPELLS -->
<!-- **Removed forward slashes before script sources** -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="StoreController as store">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
</div>
<script src="bower_components/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Hope it helps

Phonegap Multiple Pages

I'm currently working on an application in cordova. Since I have more pages I tried to add a menu. On the first page (index.html) there is some output, on the second file (settings.html) I want to make a Ajax-Request to a external server.
In the <head>-Tag all stylesheets and jQuery and Cordova is included. In the <body>-Tag some Ajax-calls are made.
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body onload="onLoad();">
<div data-role="controlgroup" data-corners="false">
Home
Settings
</div>
<!-- Ajax Requests -->
</body>
If I hit Settings I get to the html-page and the code will be displayed, but the code jQuery/js-code will not be executed. (I tried an alert, but it's not working)
Can you tell me what possibilities I have to include another page with working js-code?
Thanks!
If you are using jQuery Mobile , you can use Single Page Application(SPA) for multiple pages in Cordova like this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content" class="ui-content" >
<p>Home Page</p>
<a data-role="none" href="#setting">Setting</a>
</div>
</div>
<div data-role="page" id="setting">
<div data-role="header">
<h1>Setting</h1>
<a href="" data-rel="back" >Back</a>
</div>
<div data-role="content" class="ui-content" >
<p>Setting Page</p>
</div>
</div>
</body>
<script>
$(document).on("pagebeforeshow","#index",function(){
// You ajax call for index page
});
$(document).on("pagebeforeshow","#setting",function(){
// You ajax call for setting page
});
</script>
<html>
Demo
You need to include a script that will fire when the page is fully loaded into the DOM.
<script>
$(document).ready(function(){
-- call your$.ajax({}) here --
});
</script>
OR
<script>
(function(){
call your $.ajax({}) here --
}();
</script>

Angular ng-include

I am just learning angular.js here is my first 'hello world' script. I am trying to use ng-include to include a navbar from local file /templates/nav.html. I am following a tutorial and cant figure out why its not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body ng-app="app">
<header ng-include src="'templates/nav.html'">
</header>
<div ui-view></div>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
this is my js/app.js file:
angular
.module('app', [
'ui.router'
]);
templates/nav.html is simply the default bootstrap navbar. what am i doing wrong?
You need to include your js/app.js file as a script - right now there's no angular app being instantiated.
Add this as the last script to be included:
<script src="js/app.js"></script>
It should be:
<div ng-include="'templates/nav.html'"></div>
And put the header tag inside your nav.html.

Combining and minifying JS and CSS in ASP.NET MVC

I created default ASP.NET MVC 3 web application. Then I added three css and three js files to \Views\Shared_Layout.cshtml view:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet1.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet2.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript2.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
....
when I run the application, I html code is
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet1.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/JScript1.js" type="text/javascript"></script>
<script src="/Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
Is it possible to have a handler in MVC to change my output html to like:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<script src="js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js" type="text/javascript"></script>
<link href="css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
So the link js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js
will return content of all these js files to the browser, and link css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css will return content of all css files.
I did something before in ASP.NET by IHttpHandler, but can't figure out how to do that in MVC, since I'm just starter in MVC.
Any help and code samples will appreciate.
Thank you!
You can use bundle and minification nuget package. Bundling and Minification
At the NuGet console type: "Install-Package Microsoft.AspNet.Web.Optimization"
Example here:
Using Web Optimization with MVC 3
I use cassette in my own projects. Also, this list here contains top 20 in Nuget.

Categories