Im using AngularJS 1.4.1, ngRoute 1.4.1 and https://angular-ui.github.io/bootstrap/
The base structure is
<html ng-app="myApp">
<base href="/">
<body>
<div ng-view></div>
</body>
</html>
and I use ngRoute to load each page of my website such as about, contact us, etc... into the div with ng view.
When the page is loaded into ng view using
var myApp = angular.module('myApp', ['ngRoute', 'ngProgress', 'ui.bootstrap']);
myApp.config(function($routeProvider,$locationProvider){$routeProvider
.when('/about',{templateUrl:'about.php',controller:'mainController'})
.otherwise({redirectTo:'/'});
staffPanelApp.controller('mainController', function($scope, $route, $routeParams, $location, $templateCache, ngProgress) {
$templateCache.removeAll();
ngProgress.start();
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
ngProgress.complete();
});
the ui bootstrap feature such as alert should work but it doesn't appear to work in the ngview, it only seems to work when i add it to the main base page. Is there a way to get it to work in the ngView loaded page?
Example Bootstrap UI Feature:
<alert type="success">This should work</alert>
Update:
Plunker but couldn't get ngroute to work but the basis is there:
http://plnkr.co/edit/Njg16e01Ocv1iC1qzn7A?p=preview
Could it be because you create controller on 'staffPanelApp' but your ngApp is called myApp?
Related
Only the html output and the {{10 + 10}} of the web page is rendered. I'm not sure what what I'm doing wrong but I'm guessing it's some setup type issue in my visual studio project.
(function () {
var app = angular.module("ShipmentsHome", []);
var EditShipmentsController = function ($scope) {
$scope.message = "--Still need to create grid here--";
};
app.controller("EditShipmentsController", ["$scope", EditShipmentsController]);
}());
!DOCTYPE html>
<html>
<head>
<title>Shipments Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="../../lib/home.js"></script>
</head>
<body ng-app="ShipmentsHome" ng-controller="EditShipmentsController">
<h1>Product Transfers</h1>
<p>Create or modify a transfer below:</p>
<div> {{message}}</div>
<p>look above for message from controller</p>
<h2>{{10 + 10}}</h2>
</body>
</html>
I am not seeing any errors in the console. Below is what I am seeing:
Probably the problem will be with your relative path. I got it working when I replace the script source with the actual controller script. please check your path and correct it.
Issue was the project I was working with was setup to use .ts files and not .js files. I needed to create the project to work with angularjs not typescript.
I am not getting the expected message when using value recipe.
I am getting output as {{message}}, but I am expecting "hai services are working!!"
Please share where I am going wrong.
HTML code: Injector.html
<!DOCTYPE html>
<html>
<head>
<title>Practicing Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="Injector.js"></script> <!-- Injector module file name -->
</head>
<body ng-app="injectormodule"> <!-- root module-->
<div ng-controller="controllerInjector">
{{message}}
<!-- controller name-->
</div>
</body>
</html>
Controller: Injector.js
var app = angular.module("injectormodule", ["servicemodule"])//name of service is servicemodule
.controller("controllerInjector", ["$scope", "message", function($scope, message){
$scope.message = message;
}]);
Service:(Value Recipe)
var myapp = angular.module("servicemodule", [])
.value("message", "hai services are working!!");
You have to define your servicemodule before your injectormodule, otherwise its creation will fail (since unable to find the servicemodule dependence).
Since the injectormodule failed from being created, the ng-app="injectormodule" will also be unable to bootstrap Angular on your DOM, thus won't interpret things like double brackets ({{ message }}).
Here is a working codepen.
You need to Inject your service into controller and need to create same module.
See this sample working fiddle which use service method to get text.
See other fiddle link also in comments
I have a very simple form using angularjs that validates a number field test.html ...
http://plnkr.co/edit/mfxdTxGUXLZswzl1nyF2?p=preview
<div ng-app="myApp">
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) { }]);
</script>
<form name="myForm" ng-controller="myController">
<input name="numberField" ng-model="myModel" type="number" value="" />
<p ng-show="myForm.numberField.$error.number">Not valid number!</p>
</form>
</div>
</html>
I want to put that form into a different html page...
<html>
<div id="test">
<!--I want my angular js number element to go here-->
</div>
</html>
Normally when I do something like this I use javascript and make a request to the page and use innerhtml to place the form where i want it, something like this...
<script>
var xRequest1;
xRequest1=new XMLHttpRequest();
xRequest1.onreadystatechange=function ()
{
if((xRequest1.readyState==4) && (xRequest1.status==200))
{
document.getElementById("test").innerHTML=xRequest1.responseText;
}
}
xRequest1.open("post","test.html",true);
xRequest1.send();
</script>
However this is not working, any idea how I can do this? or is this even possible? Ive never worked with angularjs before. Thanks in advance!
If you are building angular app from scratch then, you should
consider, putting ng-app in the main index and using ng-include as
#Ronnie pointed out.
But, If you are forced to integrate angular, in one place on legacy
code, you can manually bootstrap angular app, after, filling the
div#test in the ajax callback using angular.boostrap :
Here is a working demo using your exemple.
var xRequest1;
xRequest1=new XMLHttpRequest();
xRequest1.onreadystatechange=function ()
{
if((xRequest1.readyState==4) && (xRequest1.status==200))
{
document.getElementById("test").innerHTML=xRequest1.responseText;
// bootstrap your app here ...
angular.bootstrap(document.getElementById('test'), ['myApp']);
}
}
xRequest1.open("get","test.html",true);
xRequest1.send();
I am playing around with adding in an Angular-UI router which is working perfectly when I click on links within my application. For example, if I go from / to /feed/9 it will load in the /partials/post.html file into the ui-view div and I can then use the '9' held in $stateParams to populate the template with the data from post 9. However if I refresh the page, the site breaks and Angular tries to load index.html as the ng-app.js file? I have no idea what is happening here. I've uploaded some screenshots to demonstrate this and I've included my node server, angular routing and the relevant html partials. I have no idea where this is going wrong so I can provide any additional data and any help would be greatly appreciated!
Working fine when coming from another link on '/'
On refresh!!
Node - server.js
var = /* Dependencies and vars */;
mongoose.connect(dbConfig.url, dbConfig.options);
app.use(express.static(__dirname + '/public'));
app.use(morgan('dev'));
app.use(bodyParser());
app.use(flash());
require('./routes/api.js')(app); //For CRUD operations on the database
require('./routes/api_proc.js')(app); //Protected endpoints for CDN
require('./routes/api_ext.js')(app); //For getting data from GCal, fb, Twitter and Instagram
/* The following code is a url rewrite to pass all
further get requests that aren't defined in the
above routing files through the index page and
hence through the Angular 'frontend' routes */
app.use(function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(port);
Angular ng-app.js
var app = angular.module('app', ['ui.bootstrap', 'ngResource', 'ui.router']);
//Using state ui-router
// ROUTES
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url : '/',
templateUrl : 'partials/home.html'
})
/* ... */
.state('feed', {
url : '/feed',
templateUrl : 'partials/feed.html'
})
.state('post', {
url : '/feed/{id:.*}',
templateUrl : 'partials/post.html',
controller: 'postController'
})
$locationProvider.html5Mode(true);
});
app.factory("Feed", function($resource) {
return $resource("/api/feed/:id", {}, {
query: {
isArray: true
}
});
});
app.controller("postController", function($scope, Feed, $stateParams) {
var feed = Feed.query();
feed.$promise.then(function(promiseData) {
postArray = promiseData.slice(0,promiseData.length);
$scope.feed = promiseData;
$scope.id = $stateParams.id;
});
});
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<!-- CDN -->
<!-- Angular, Bootstrap, Angular modules, etc. -->
<!-- Styles -->
<!-- Angular Script import -->
<script type="text/javascript" src="ng-app.js"></script>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav><!--Bootstrap nav--></nav>
<div ui-view></div>
<footer></footer>
<script>
//For Bootstrap tooltips which are in some of the partials.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[rel=tooltip]').tooltip();
});
</script>
</body>
</html>
/partials/post.html
<div class="container-fluid main-content">
<header class="banner" class="row">
<h1 class="page-title">{{id}}</h1>
</header>
<!-- Main page info -->
</div>
I think you have relative paths pointing to your css files.
When you load page from /feed/9 then links are invalid.
Maybe it happens also for templates referenced from angular.
Is possible retrieve multiples html partials in one single html? I've the next situation:
Template: {header} {main} {footer}
/index: header:"Welcome" main:"welcome text" footer:""
/help: header:"Help title" main:"faq tips" footer"Back to home"
using ng-include I've to retreive 6 html from server. If I will retrive multiples partials in one html then I will retrieve 2 html from server only, one for /index and one for /help.
This situation is a small example the real situation.
The tag script with type ng-template don't work for me, because the script must be include before of ng-include.
Thanks!
Update 04/07/12:
I seek to update more than one div at a time, with an unique html retreive. I don't like this:
function IndexCtrl($scope) {
$scope.mainPage = 'partials/index/index.html';
$scope.headerTemplate = 'partials/index/header.html';
$scope.footerTemplate = 'partials/index/footer.html';
}
After in the template use ng-includes for include these partials. I think that this is not the correct way. There is other way?
Thanks!
Templates can be embedded in the main html. For example, with the following index.html:
<!DOCTYPE html>
<html ng-app=app>
<meta charset=utf-8>
<title>App</title>
<ng-view>Loading...</ng-view>
<script type=text/ng-template id=partial1.html>
<p>foo = {{foo}}</p>
</script>
<script type=text/ng-template id=partial2.html>
<p>Contents of partial2.html</p>
</script>
<script src=app.js></script>
you can use the following app.js:
angular.module('app', [], ['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) {
$routeProvider.when('/p1', { templateUrl: 'partial1.html', controller: 'Partial1' });
$controllerProvider.register('Partial1', ['$scope', function($scope) {
$scope.foo = 'bar';
}]);
}]);
The documentation for the $templateCache service has more details.
What I do is use template instead of templateUrl, and use the requirejs text plugin to load the templates. that way for development you can have thousands of files for your templates, but once you minify you only have one javascript file with all the templates inlined.
I created an open source project which is setup for backbone but can easily be modified for angular which does the minification and requirejs text plugin wiring for you: http://github.com/davidjnelson/agilejs