Given an empty document with just the bare essentials, loading js files and stylesheet:
<!doctype html>
<html ng-app="labApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="/static/lab.js"></script>
<link rel="stylesheet" href="/static/local.css" />
<link rel="stylesheet" href="/static/superhero.min.css" />
</head>
<body ng-controller="labController">
</body>
</html>
And an empty controller in lab.js:
angular.module('labApp', [])
.controller('labController', function() {
var lab = this;
});
How do I go about loading a partial view into the body?
Am I supposed to do things like that manually, using jQuery, or is there some hidden facility in angular to load partials?
You can do this by rendering different views with ui-router: https://github.com/angular-ui/ui-router
When loaded into your application, you can include it like this in
angular.module('app', [ui.router])
When you follow the documentation it is pretty easy to setup different routes. Good luck!
Related
I was trying to merge AngularJS and VueJS projects together since we need to have a requirement of calling the flow designed in VueJS from inside an AngularJS app. For merging AngularJS and VueJS projects together, I included the dependencies in package.json file of Angular and Vue together and few other files too.
Now since both Vue and Angular have an index.html file created in the project root directory, I made the Angular one as my index.html file and renamed VueJS index file as index23.html. Then from the link from where I need to call VueJS flow, I provided the path in the router of AngularJS config file as shown:
'use strict';
app.config(function ($routeProvider) {
$routeProvider
.when("/errorinput", {
templateUrl: "src/index23.html"
});
});
app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
// Implement me!
}]);
But on doing so, my VueJS page doesn't comes up but rather it comes up in background I think as current page gets surrounded with a white background on clicking that link. I am really not sure if I need to code something inside the app.controller method of above file since this is a Vue component which I am talking about.
Is there any way we can make this work? Please let me know if I need to provide additional details. Contents of index.html file from where this call is made are below:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SEW Drive Status| </title>
<!-- Bootstrap -->
<link href="node_modules/gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="node_modules/gentelella/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="node_modules/gentelella/build/css/custom.min.css" rel="stylesheet">
<!-- Angular JS Material -->
<link href="node_modules/angular-material/angular-material.min.css" rel="stylesheet">
<!-- Angular JS Material -->
<!--link href="public/material.css" rel="stylesheet"-->
</head>
<script src="node_modules/angular/angular.min.js" ></script>
<script src="node_modules/angular-route/angular-route.min.js" ></script>
<script src="node_modules/angular-aria/angular-aria.min.js"></script>
<script src="node_modules/angular-material/angular-material.min.js"></script>
<script src="app/app.js" ></script>
<!-- custom control script section -->
<script src="app/components/assetlist.js" ></script>
<script src="app/components/errorinput.js" ></script>
<script src="bundle.js"></script>
<li><a><i class="fa fa-edit"></i>Administration<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><i class="fa fa-database"></i>Manage Error Descriptions</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
This is the Angular page and link(Manage Error Descriptions) from where I need to call VueJS app:
White background issue:
errorinput.js file after adding the code:
'use strict';
app.config(function ($routeProvider) {
$routeProvider
.when("/errorinput", {
templateUrl: "views/errorinput.html"
});
});
app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
// Implement me!
<template>
<div class="container">
<div>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
<script>
export default{
}
</script>
}]);
Vue and Angular can co-exist on a page just fine.
Because you're using Angular to render Vue's HTML, you'll need to make sure your Vue initialization fires after the new HTML is rendered. You could accomplish this a couple of ways:
Paste your Vue script where it says // Implement me in your code above
Use a hook in your Angular router to load your Vue-specific .js file after the route has loaded
First option is probably more performant, while second option probably keeps your dev setup cleaner.
My problem is that my html load the .js and .css before ng-include finished,
Then this libraries not found the elements that are loaded in include.
Example:
<html>
<head>
<link href="assets/css/modern.min.css" rel="stylesheet" type="text/css">
<script src="assets/js/modern.min.js"></script>
</head>
<body>
<div ng-include="html_2"></div>
</body>
</html>
when modern.js is loaded, html_2 is no finished so this not working because modern no found the element of html_2
Where are you loading your angular application script? Maybe you can use a library like headJS or labjs to ensure the order of your scripts load.
e.g.
head.load(modernjsScript, function(){
head.load(angularjs, function(){
head.load(yourApplicationsScript)
});
})
Why does adding AngularJS to a page break it? What can I do to allow it to function correctly? Controls stop rendering. Menus stop expanding.
I am trying to divide the index.html page of an existing Bootstrap theme into partials / templates. Unfortunately, as soon as I move the HTML out of the index.html the controls on that page break.
The theme I am using is KingAdmin v1.3 from WrapBootstrap.com: https://wrapboo...
The only markup I'm adding is...
ng-app="app"
<div ng-include="'shell.html'"></div>
<script src="assets/thirdparty/angular/1.2.26/angular.js"></script>
<script src="assets/app/app.js"></script>
The shell.html contains only the portion of the body that was in the index originally...
WITHOUT ANGULAR:
WITH ANGULAR:
INDEX.HTML:
<head>
<title>Dashboard | KingAdmin - Admin Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="KingAdmin - Bootstrap Admin Dashboard Theme">
<meta name="author" content="The Develovers">
<!-- CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/main.css" rel="stylesheet" type="text/css" media="screen">
<!--[if lte IE 9]>
<link href="assets/css/main-ie.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/css/main-ie-part2.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/kingadmin-favicon144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/kingadmin-favicon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/kingadmin-favicon72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/ico/kingadmin-favicon57x57.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body class="dashboard">
<div ng-include="'shell.html'"></div>
<!-- Javascript -->
<script src="assets/js/jquery/jquery-2.1.0.min.js"></script>
<script src="assets/js/bootstrap/bootstrap.js"></script>
<script src="assets/js/plugins/modernizr/modernizr.js"></script>
<script src="assets/js/plugins/bootstrap-tour/bootstrap-tour.custom.js"></script>
<script src="assets/js/king-common.js"></script>
<script src="assets/js/plugins/stat/jquery.easypiechart.min.js"></script>
<script src="assets/js/plugins/raphael/raphael-2.1.0.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.resize.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.time.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.pie.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.tooltip.min.js"></script>
<script src="assets/js/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="assets/js/plugins/datatable/jquery.dataTables.min.js"></script>
<script src="assets/js/plugins/datatable/dataTables.bootstrap.js"></script>
<script src="assets/js/plugins/jquery-mapael/jquery.mapael.js"></script>
<script src="assets/js/plugins/raphael/maps/usa_states.js"></script>
<script src="assets/js/king-chart-stat.js"></script>
<script src="assets/js/king-table.js"></script>
<script src="assets/js/king-components.js"></script>
<script src="assets/thirdparty/angular/1.2.26/angular.js"></script>
<script src="assets/app/app.js"></script>
</body>
</html>
UPDATE 2014-11-25
I've confirmed this is not me. I had a friend attempt to convert a single page in the template to Angular partials using ng-include tags and setting it up behind a proper Node.JS server. He had the same results. As soon as Angular renders the first page, tons of functionality breaks. the expand/collapse logic everywhere stops working. Most of the controls stop rendering properly.
NOTE
Someone mentioned that the problem might be caused by the use of ng-include tags and partials WITHOUT the partial file having a contoller. The side bar, top bar, breadcrumb are all being included as static HTML / Jade files via an ng-include. A route is passing in the controller for the main body, however the problems exist within this area as well.
Here is a link to the template on the developer's site:
KingAdmin Dashboard Theme
And here is how it currently looks:
Quick look at the modifications from the index.html page:
PARTIALLY RESOLVED:
Not sure if this would be considered a hack. Someone with more knowledge of jQuery and Angular could / should chime in to tell you if this is safe.
STILL UNRESOLVED:
This seems to work while the page is being loaded for the first time. It does NOT work if you navigate away from the page and back again (using the back button, for example). I believe this is happening due to Angular injecting the body and NOT re-rendering the entire page... or the scripts. There's probably something that can be done within each template that uses jQuery (re-init somehow, etc.).
There seem to be tons of questions / examples discussing similar problems with the DOM, jQuery, and using timeouts to correct them:
AngularJS: How can I run a directive after the dom has finished rendering?
The entire fix is in with your common resource scripts, king-common.js, etc.. They each have several rendering functions that appear to be called up front, however the DOM is still being rendered.
Example:
$(document).ready(function(){
$('.main-menu .js-sub-menu-toggle').click( function(e){
[snip]
$li.find('.sub-menu').slideToggle(300);
});
By wrapping each of these operations in a setTimout you postpone rendering until after the DOM is modified:
$(document).ready(function(){
setTimeout(function(){
$('.main-menu .js-sub-menu-toggle').click( function(e){
[snip]
$li.find('.sub-menu').slideToggle(300);
},1000);
);
These have been moved to the tail end of your scripts.jade / scripts.html file. This was done initially as an attempt to delay the firing of these methods, so this might be unnecessary. Still, that's part of how we arrived at a functioning template.
Your problem is Bootstrap is not watching for the newly created elements on your page that angular compiles for you. You can create directives that can call the the Bootstrap jQuery method that add the Bootstrap bindings to your element, such as ($('.dropdown').dropdown()).
There is a wonderful AngularJS library that replaces that is an angular agnostic rewrite of bootstrap.js that may fix this for you: http://angular-ui.github.io/bootstrap/
For a quick hack, if you want all your elements with the .dropdown class to use Bootstrap dropdown, you would create a directive like this.
angular.module('app')
// Directives: https://docs.angularjs.org/guide/directive
.directive('dropdown', [
// Use window dependency
'$window',
// Returns a directive
function ($window) {
return {
// Restrict to attribute, or class name so can be used like so:
//
// <a class="dropdown btn btn-primary">Dropdown button</a>
// or
// <a dropdown class="btn btn-primary">Dropdown button</a>
restrict: 'AC',
link: {
post: [
// This dependency gives you the element with
// the directive wrapped as a jQuery object
'$element',
function ($element) {
$element.dropdown();
}
]
}
};
})
I think you should reconsider your dependencies. The elements broken in your UI seems to require jquery, for instance: jquery.easypiechart.min.js
At https://docs.angularjs.org/misc/faq you can read:
Does Angular use the jQuery library? Yes, Angular can use jQuery if
it's present in your app when the application is being bootstrapped.
If jQuery is not present in your script path, Angular falls back to
its own implementation of the subset of jQuery that we call jQLite.
Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer
might work correctly with Angular but we don't guarantee that.
Notice that angular requires jQuery 2.1 or above, whilst Bootstrap require the latest 1.1.x version of jQuery (Bootstrap does not support jQuery 2+ due to jQuery 2 does not support IE8).
After reading the above you should also read:
Does one need jQuery when using Twitter Bootstrap with Angular.js?
https://github.com/angular-ui/bootstrap/issues/2765
I am learning to implement require.js to load the necessary javascript files. I am able to load java script files using require.js which in replace of <script> tags. Even though I am able to load the js files, the content inside the files are not accessible and getting the error saying 'CarApp module not found'. How would this makes the difference?
My index.html where I load require.js
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<link rel="stylesheet" href="/vendor/bootstrap-2.3.1/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="/css/style.css" media="screen">
<script src="/vendor/angularjs-1.0.5/angular.min.js"></script>
<script src="/vendor/angularjs-1.0.5/angular-resource.min.js"></script>
<script data-main="/js/main" src="/js/require.js"></script>
<div ng-app="CarApp" class="containr">
<div ng-view>
<!-- partial will go here -->
</div>
</div>
/js/main.js
requirejs.config({
paths: {
controllers: './controllers',
app: './app'
}
});
requirejs(['controllers', 'app'],
function (controller, app) { });
/js/app.js
var CarApp = angular.module('CarApp', ['ngResource'])
CarApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {controller: ListCtrl, templateUrl: '/partials/list.html'})
.otherwise({redirectTo: '/'})
$locationProvider.html5Mode(true)
})
After loading the app.js file using require.js, it is not able to access 'CarApp' module inside app.js. why is this happening? How can I access 'CarApp module' through main.js.
Your files loaded with RequireJS are not loaded on the page ready event, the time that Angular tries to bootstrap. That is why the CarApp module is not found.
You should bootstrap Angular manually (ref):
Remove the ng-app directive, replace it with an id:
<div id="mainContainer" class="containr">
Bootstrap manually in main.js:
requirejs(['controllers', 'app'], function(controller, app) {
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('mainContainer'), ['myApp']);
});
});
Also check out angular-require-lazy for some, potentially useful, ideas.
I'm working on an AngularJS project that uses Zurb Foundation as its CSS framework. I'm trying to figure out how to using Foundation's data interchange within the context of an AngularJS view. Is this even possible, I can't seem to get it to work. This is what I currently have:
index.html
<!DOCTYPE html>
<html ng-app='app' xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="foundation/normalize.css" />
<link rel="stylesheet" href="foundation/foundation.min.css" />
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div id="view" ng-view></div>
<script type="text/javascript" src="jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="foundation/foundation.min.js"></script>
<script type="text/javascript" src="angularjs/1.2.7/angular.min.js"></script>
<script type="text/javascript" src="angularjs/1.2.7/angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
angular.module('app', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.otherwise({ templateUrl: '/views/interchange.html', controller: myCtrl });
})
.run(function ($rootScope, $location) {
$rootScope.$on('$viewContentLoaded', function () {
$(document).foundation();
});
})
;
function myCtrl() {
console.log('loading controller');
}
interchange.html
<article>
testing interchange
<div data-interchange="[phone.html, (small)], [portrait.html, (medium)], [landscape.html, (large)]"></div>
</article>
When I load my app, I can see 'testing interchange'. However, the content (phone.html, portrait.html, landscape.html) based on the size of the screen is not shown. Phone.html, Portrait.html, and landscape.html just have text inside DIV elements that say 'Phone', 'Portrait', and 'Landscape' effectively.
Is there a way to leverage Foundation's data interchange stuff inside of a AngularJS ng-view? If so, how? Thank you
The main point here is that the data-interchange feature of Zurb runs on DOMContentLoad event, and the load of AngularJS' views is async. So, the event already happened.
To get over this, you need to trigger the data-interchange manually using $(document).foundation('interchange', 'reflow'); or $(document).foundation('reflow'); to reflow all components.
To trigger this on the right place, you need to listen to a special event on AngularJS routing system called $routeChangeSuccess. Something like this:
module.run(function ($rootScope) {
$rootScope.$on('$routeChangeSuccess', function () {
$(document).foundation('reflow');
});
});
Hope this help you.