I'm currently working on a simple Electron desktop app, using Angular version 1.3.0. I am using NgRoute to switch between a main.html and settings.html view. This works fine when tested in a locally run server, but when run through Electron the link which is meant to load the settings view leads to a blank page.
I've set the base tags href to './' and the main.js and vendor.js are being loaded in fine. Below is the code from the Angular app.js file.
'use strict';
angular
.module('AppApp', [
'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/settings', {
templateUrl: 'views/settings.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({enabled: true, requireBase: false});
});
And here is the index.html
<!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="styles/main.css">
<base href="./">
</head>
<body ng-app="AppApp">
<div class="container">
<div ng-view=""></div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>
And finally the main.html (Which loads when the electron app starts with no problems) with the link used to the load the settings view.
<div hm-dir='hm-dir'>
<img id="logo" src="images/logo-anchor_32x32.svg"/>
<div id="swipe-mask">
<h1>App</h1>
</div>
</div>
Related
I start to learn angularjs whit this simple code
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools- yui-compressed.js' type='text/javascript'></script>
<script src='assets/js/menuMatic.js' type='text/javascript'></script>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body ng-app="myApp">
<div ng-include="'header.html'"></div>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/posts.js"></script>
<script src="js/service/post.js"></script>
</body>
</html>
app.js
var app = angular.module('myApp',['ngRoute'])
app.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
});
when i use angularjs 1.2.27 it's work fine but when i use angularjs 1.5.8 it show me this error
angular.js:38Uncaught Error: [$injector:modulerr] angular.js:38
i believe it some global controller function is disabled or something but i don't know how to fixed
EDIT
I use angularjs version 1.4.8 and it's working .. but when i use 1.5.8 it not working anymore
I think you need to separately add $rootProvider to your config like below:
var app = angular.module('myApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
}]);
It's either you put semi-colon at the end of the first line.
Or remove the "app" in second line of code.
var app = angular.module('myApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
});
or
var app = angular.module('myApp',['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl:'partials/home.html',controller:'PostsCtrl'})
.otherwise({redirectTo:'/'});
});
I can't seem to create a simple angular route in my current application, since it handles me the following error: Uncaught Error: [$injector:modulerr]
I have already injected ngRoute as a dependency in my module, as well as added the angular-route.js script in my html file. My current Angular version is 1.2.25, so it's the angular-route script.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ACME App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="init">
<a ng-href="#main">sup</a>
<ng-view></ng-view>
</body>
</html>
controllers.js
var app = angular.module("init", ["ngRoute"]);
app.config('$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "templates/main.html"
});
});
templates/main.html
<h1>Main Page</h1>
I think that you missed [ ]
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "templates/main.html"
});
}]);
I am trying to add some routing to my project. And I am using basic angular route with Angular 1.3.0
app.js file:
'use strict';
var routerApp = angular.module('mcw', [
'ngRoute',
'mcw.controllers',
'directives',
'filters',
'mcw.services']);
routerApp.config(function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'index.html', controller: 'LoginController'})
.when('/Home', {templateUrl: 'templates/home.html', controller: 'ResourcesController'})
.otherwise({redirectTo: '/'});
});
index.html file:
<!DOCTYPE html>
<html lang="en" ng-app="mcw">
<head>
<meta charset="utf-8">
<title>title spec</title>
<script src="js/angular1.3.0/angular.js"></script>
<script src="js/angular1.3.0/angular-route.js"></script>
<script src="js/angular1.3.0/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/commonFunc.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/server.js"></script>
<script src="js/services.js"></script>
</head>
<body>
</body>
</html>
I use 'python -m http.server' (Python 3.4.3) as the server, and the urls of
"127.0.0.1:8000/", "127.0.0.1:8000/index.html", "127.0.0.1:8000/index.html#/Home" all goes to index.html page.
You have missed ng-view directive on page, which loads view from $routeProvider and the template & specified controller will get loaded in the ng-view element.
Add it inside body
<body>
<ng-view></ng-view>
</body>
Yes you need ng-view inside the body.
Only what you load inside the ng-view tag should not be index.html in my view. (but what you want to place inside the ng-view tag). The index.html should be the page where you place your ngview. To load other html files in (insie the ng-view tag)
The way it works is that the 'directives' will be placed INSIDE the ng-view tag.
(to be more specific, the html files you typed in your router {.when} objects.
in your case: templates/home.html and what you called index.html
<!DOCTYPE html>
<html lang="en" ng-app="mcw">
<head>
<meta charset="utf-8">
<title>title spec</title>
<script src="js/angular1.3.0/angular.js"></script>
<script src="js/angular1.3.0/angular-route.js"></script>
<script src="js/angular1.3.0/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/commonFunc.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/server.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
Or you can even use a div with ng-view inside it if you wish. (i reccomend the first method)
I'm developing a web app with AngularJS for the frontend and i'm trying to set the routing and showing the views, so far even ng-include and other stuff work for me but not ng-view
I'm developing in visual studio and when i run the app it's using a local server (localhost)
here's my directory structure
- ASP.NET project
---- Css
---- Scripts
-------- App
-------- app.js
----------- Home
-------------- Controllers
------------------ index-controller.js
---- Views
------- Partials
---------- navbar.html
------- home.html
- index.html
Here's mi index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scolaris</title>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="Content/materialize/css/materialize.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body ng-app="app_module">
<ng-include src="'Views/Partials/navbar.html'"/>
<div ng-view></div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Content/materialize/js/materialize.js"></script>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-route.js"></script>
<script type="text/javascript" src="Scripts/App/app.js"></script>
<script type="text/javascript" src="Scripts/App/Home/Controllers/index-controller.js"></script>
<script type="text/javascript" src="Scripts/initialization.js"></script>
</body>
</html>
Here's my app.js
'use strict';
var app_module = angular.module('app_module', ['ngRoute']);
app_module.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/Views/home.html',
controller: 'indexController'
})
.otherwise({
redirectTo: '/'
});
}]);
/* tried with ../../Views/home.html, ../Views/home.html, etc and nothing */
When i load the site it loads correctly and if i see the requests i can clearly see that it's requesting the home.html with 304 status code, the thing is the div with ng-view is not showing the html inside home.html, what could this be due to?
I've solved the issue by changing the <ng-include> tag with an <div ng-include="srctoview"> tag. If anyone is having this issue i'd recommend doing this, or doing it like in this answer using a controller
Thanks to #Sourabh- for leading me to an answer.
close <ng-include> directive properly as browser is wrapping ur <ng-view> inside of <ng-include>. it will solve the problem. as #pankaj has already suggested.
I'm trying to set up a demo angular app but for some reason my partial (partials/test.html) content isn't loading into the layout file. Here's the index.html:
<!DOCTYPE html>
<html lang="en" ng-app="btq">
<head>
<meta charset="utf-8" />
<title>NgView Test</title>
</head>
<body>
<p>Some stuff on the page.</p>
<div ng-view></div>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>
AngularJS is version 1.0.7. app.js contains the following:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('btq', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/dashbaord', {templateUrl: 'partials/test.html', controller: 'DashboardCtrl'});
$routeProvider.otherwise({redirectTo: '/dashboard'});
}]);
/* Controllers */
angular.module('btq.controllers', []).
controller('DashboardCtrl', [function() {
}]);
I'm obviously missing something simple. Any help would be appreciated!
May be its because of "typo". You wrote "dashbaord" instead of "dashboard" here:
$routeProvider.when('/dashbaord' , ...
Change
angular.module('btq.controllers', [])
to
angular.module('btq')
otherwise this creates a second app in your app.js