Angular UI Router: Cannot log inside of .config - javascript

I've been trying to link up components of a simple Angular app but cannot seem to get my initial view state to load. One main issue seems to be that I can't even log inside of my .config setup (despite making sure that everything is syntactically correct). As far as I can tell (after some testing) all of my files are in the right locations).
Anybody see any glaring mistakes?
index.html:
<!DOCTYPE html>
<html>
<head></head>
<title>Thing</title>
<body class="container">
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
<!-- dependencies -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- css files -->
<!-- application files -->
<script src="js/app.js"></script>
<script src="js/payments.js"></script>
<!-- Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
</body>
</html>
app.js:
var paymentApp = angular.module('paymentApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/payments')
// Now set up the states
console.log("in config")
$stateProvider
.state('payments', {
url: "/payments",
templateUrl: "view/payments.html"
})
});
payments.html:
<h1>Payments Page</h1>
<div class="buttons">
<button>Click Me!</button>
</div>
<div class="search"></div>
<div class="payments"></div>

Quite a simple mistake to make - you have forgotten to bootstrap your angular app.
You need to add the ng-app directive somewhere and point it to your module.
E.g.
<html ng-app="paymentApp">
https://docs.angularjs.org/api/ng/directive/ngApp

Related

Adding app.js to angular application

I'm triying to add bootstrap ui modules to an angular project. In every tutorial I read that after download the module i'm supposed to add a directive (angular.module(for example: 'App', ['ui.carousel']) to certain file that in some forums i've read is called app.js. This file doesnt exist in my project. The question is: Should I create it? Where? Is a controller necesary? How is the flow that this must follow? Then I should add it to the index.html?
Getting advanced here with components without even knowing the basics. I recommend starting with just controllers (without components). But, here is a basic example of how scripts are added:
<!DOCTYPE html>
<html ng-app="myApp">
<!-- Adding scripts here. The order matters: angular.js first, then its dependancies, e.g. ui-bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div>
<!-- main body -->
<div>
<hello-world name="World"> </hello-world>
</div>
</div>
<!-- ng-template simulates a separate file -->
<script type="text/ng-template" id="my_component.html">
<input class="form-control" ng-model='$ctrl.name'><br><span>Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!</span>
</script>
<!-- This script can be also written as:
<script src="/app.js"></script>
if the file `app.js` is located in root directory of the server,
which should contain the AngularJS code below
-->
<script>
var app = angular.module('myApp', ['ui.bootstrap']); // injected dependancies
app.component("helloWorld", {
templateUrl: "my_component.html",
/* component template */
bindings: {
name: '#'
},
controller: function() {
this.myName = 'Karolyn'; // use of `this` requires `$ctrl` in the template HTML
}
});
</script>
</body>
</html>

create controller in ng-view page

I want to manage my controller specific to an ng-view page, therefore I put the controller in ng-view page and used that controller specific to that page only. However, the code does not show what it should show from that controller.
Here is my case.
I split my code into 3 files, which are "mainfile.php", "page1file.php", and "page2file.php". "mainfile.php" contains main page which routes to page 1 and page 2. To compare the results, I created different conditions for those 2 pages. "page1file.php" uses controller which has been defined in "mainfile.php", while "page2file.php" uses controller which is defined in the page itself.
In this circumtances, "page1file.php" successfully shows what I want, but "page2file.php" does not show what it should show. Please help me and give a very simple explanation and a simple solution since I'm very new to angularjs.
Here is my code. You can just copy them and run it on your php server.
mainfile.php :
<!DOCTYPE html>
<html>
<head>
<title>learn angular routing</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<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.min.js"></script>
<script type="text/javascript">
function routeReload($scope) {
$scope.routeReloading = function(){
window.location.reload();
};
}
routeReload.$inject = ['$scope'];
function routeConfig($routeProvider) {
$routeProvider
.when('/one',{
templateUrl:'page1file.php'
})
.when('/two',{
templateUrl:'page2file.php'
})
;
}
routeConfig.$inject=['$routeProvider'];
function testOne($scope) {
$scope.name = "page one";
}
testOne.$inject = ['$scope'];
var testNgView = angular.module('testNgView',['ngRoute']);
testNgView.config(routeConfig);
testNgView.controller('routeReload',routeReload);
testNgView.controller('testOne',testOne);
</script>
</head>
<body>
<div ng-app="testNgView">
<div ng-controller="routeReload">
View page <a ng-click="routeReloading();" href="#one">one</a> or
<a ng-click="routeReloading();" href="#two">two</a>
<div ng-view></div>
</div>
</div>
</body>
</html>
page1file.php :
<div ng-controller="testOne">
This is {{name}}
</div>
page2file.php :
<script type="text/javascript">
function testTwo($scope) {
$scope.name = "page two";
}
testTwo.$inject = ['$scope'];
testNgView.controller('testTwo',testTwo);
</script>
<div ng-controller="testTwo">
This is {{name}}
</div>
I don't think you can inline script modules in your view templates. Have a look at this working version of your app, the way I would organize it:
http://plnkr.co/edit/nSsagK1Y04akNJyMToah?p=preview
You can use .php files in place of the .html files, that shouldn't make a difference.
So your main file should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>learn angular routing</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<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.min.js"></script>
</head>
<body>
<div ng-app="testNgView">
View page one
or two
<ng-view></ng-view>
</div>
<script src="app.module.js"></script>
<script src="app.routes.js"></script>
<script src="views/page1/controller.js"></script>
<script src="views/page2/controller.js"></script>
</body>
</html>
If your goal is to use PHP to dynamically render your controllers, see the answer to this SO question: Angularjs: server side (php) rendering and data binding client side after an event
You may also be interested in this article, about loading Angular components after the application has been bootstrapped: http://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm
TL;DR: You would need to store a reference to $controllerProvider in the config phase, and then call $controllerProvider.register('MyController', MyController) in your inline script. I'm not sure how I feel about that though...

Loading text/ng-template in AngularJS directives correctly

I have a directive that I want to clear the content of a DIV and replace it with a template either in my current view or somewhere else in my app.
So say I have my template like so...
<!-- This is an experiment -->
<script type="text/ng-template" id="1.html">
<div data-ng-repeat="beatle in beatles track by $index">
Name: {{beatle.name}}, Instrument: {{ beatle.inst}}, Alive: {{ beatle.alive }}
</div>
</script>
and in my directive I have the following:
link: function (scope, element) {
element.bind('click', function () {
// clear out old template
angular.element(element).empty();
angular.element(element).html(document.getElementById('1.html'));
});
}
I seem to be able to load the template but I see the following instead of my content
[object HTMLScriptElement]
I wondering if I need to compile again or run a digest or if I am just going about this totally wrong. I also don't like using document.getElementById in my directive code, for some reason it feels wrong. Can anyone provide me with an answer to why I only see [object HTMLScriptElement] after clicking my directive and wether using document.getElementById in my directive is acceptable or if there is a better command to load the content...
Here is a fiddle of the whole app... or a bin! https://jsbin.com/yizupa/edit?html,output
In the meantime I have just came to the conclusion that my setup / implementation is wrong and that I should consider another way to implement such a feature.
here, i have create one running demo.. for route using **text/ng-template**..
index.html
-------------
<!DOCTYPE html>
<html lang="en" ng-app="singlePageApp">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<head>
<meta charset="UTF-8">
<title>AngularJS Routing Template..</title>
</head>
<body>
<div ng-controller="singlePageAppController">
{{message}}
</div>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div ng-view="showOutput"></div>
</body>
<script type="text/ng-template" id="home.html">
This is HOME Page..
</script>
<script type="text/ng-template" id="about.html">
This is ABOUT Page..
</script>
</html>
--------
app.js
--------
var app=angular.module('singlePageApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/home',{
controller:'singlePageAppController',
templateUrl: 'home.html'
})
.when('/about',{
templateUrl: 'about.html'
});
});
app.controller('singlePageAppController',function($scope){
$scope.message="Hello Single Page Application..";
});

Angular.js routing not working

Angular is working as I can see the {{ text }} but I can't seem to get the ng-view to display.
My code is:
index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.3.5/angular.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div class="main_container" ng-controller="MainController">
<span ng-cloak>{{text}}</span>
<div ng-view></div>
</div>
<!-- modules -->
<script src='app.js'></script>
<!-- controllers -->
<script src='MainController.js'></script>
<script src='home.js'></script>
</body>
</html>
home.js:
app.controller('home', function($scope) {
$scope.words = 'It works!';
});
MainController:
app.controller('MainController',function($scope){
$scope.text = 'Hello World!';
});
home.html:
<div ng-controller="home">
<h3>{{ words }}</h3>
</div>
app.js:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/index',{
templateUrl: 'home.html',
controller: 'home'
}).
otherwise({
redirectTo: '/index'
});
//$locationProvider.html5Mode(true);
});
edit:
It seems to work in plunker but when I open the file in chrome I get the following error:
"XMLHttpRequest cannot load {{file location}}. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."
You don't need the ng-controller attribute on your root element in home.html because you are already defining the controller for that template when you set up your $routeProvider. Beyond that your code looks good. If you really want to get ahead of the game, though, I would recommend using UI Router if you plan to do any advanced routing in your application. It is much more robust and easier to work with than Angular's ngRoute, widely used, and well-documented.
Your Code is working fine !! there may be problem on which file to load first so please take care of the order of the files added in your HTML
Here is the working plunker with your code. here ng-view loads with no problem
http://embed.plnkr.co/oNADizOltrGitbWTWNXf/preview
Hope this helps!!!

How can I make a single html file AngularJS app [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I need to make an AngularJS app that must have all of it's html in a single page (I'll explain why). I'd like to use ng-route to move through multiple "screens", but all of the html must come from the original page (cannot load anything in the background). One way I could solve this is to swap out everything inside the body tag (with content loaded in script tags as ng-template blocks). Is there another way to do this?
I know that the "static page" requirement is odd, but imagine if I wanted to have an html page that runs offline on multiple platforms. In the offline mode it cannot originate from a server or get additional templates.
EDIT
Ok, it looks like I had a bad closure that made the code not work in the single page mode. Anyway, here is the working code.
<!DOCTYPE html>
<html ng-app="startApp">
<head>
<title>Hello World, AngularJS</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="startapp.js"></script>
</head>
<body>
<!-- Inline partials -->
<!-- Page 1 -->
<script type="text/ng-template" id="/page1.html">
<div>
<h3>Welcome to STAR Marketing</h3>
<div>
<a ng-href="#/page2" >Next Page</a>
</div>
</div>
</script>
<!-- Page 2 -->
<script type="text/ng-template" id="/page2.html">
<div>
<h3>Welcome to the second page</h3>
<div>
<a ng-href="#/page1" >Back</a>
</div>
</div>
</script>
<!-- end of partials -->
<div id="page-div" ng-view>
</div>
</body>
</html>
startapp.js
var startApp=angular.module('startApp',['ngRoute']);
startApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: '/page1.html',
controller: 'Page1Controller'
}).
when('/page2', {
templateUrl: '/page2.html',
controller: 'Page2Controller'
}).
otherwise({
redirectTo: '/page1'
});
}]);
startApp.controller('Page1Controller', ['$scope', function($scope) {
}]);
startApp.controller('Page2Controller', ['$scope', function($scope) {
}]);
I'm not sure if I understood well what you want, but I think that what you are looking for is $templateCache.
Like this:
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
In this way you can define all the templates that you want in the same page.

Categories