I am wondering if there is a better way to import all my angular scripts. Currently, if I add a new controller or component I need to go into my index.html and import it at the bottom. This is fine but is a tedious task and I can imagine after the application grows, this may get messy. Is there a best practice to automate this?
My index page looks like this: (All criticism is welcome)
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<title>Test Page</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/main.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<popcorn-header></popcorn-header>
<!-- .container -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div ui-view></div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Vendor -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="lib/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script>
<!-- Bootstrapping -->
<script type="text/javascript" src="app.js"></script>
<!-- Routes -->
<script type="text/javascript" src="routes.js"></script>
<!-- Core -->
<script type="text/javascript"src="components/api/api.js"></script>
<script type="text/javascript"src="constants.js"></script>
<script type="text/javascript"src="components/api/ApiFactory.js"></script>
<script type="text/javascript"src="components/header/HeaderDirective.js"></script>
<script type="text/javascript"src="components/feed/feed.js"></script>
<script type="text/javascript"src="components/feed/FeedController.js"></script>
<script type="text/javascript" src="components/feed/FeedDirective.js"></script>
</body>
</html>
If your application is smaller and has only 10-20 script and css files then writing simple grunt task for generating html will be simple and good. But if you have hundreds of script and styles then you should use one of the following module loader library. these libraries will make your life really easy in managing modules based application.
And Angular's module system works really great with all of these.
RequireJs
http://requirejs.org/
Browserify
http://browserify.org/
Webpack
http://webpack.github.io/
Related
Steps:
I have many custom components. Hence, I created standalone package.
I did it bundle using webpack.
Include that bundle file in HTML page using script tag.
Now, I just want to use it in HTML page like below example, but I cant access it.
<!DOCTYPE html />
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"> </script>
<script src="build.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/jsx">
ReactDOM.render(<CustomButton />, document.getElementById('root'));
</script>
</body>
</html>
Is it possible to access component once bundle ?
I am working on MEAN Stack application. I want to use Bootstrap Material Design CSS styles to my single page application but routing is not working when using mdb.min.css .what is the solution to avoid this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Testing Application</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="css/mdb.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<div ng-view></div>
<!-- SCRIPTS -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/tether.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.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.js"></script>
<script type="text/javascript" src="js/routingCtrl.js"></script>
<script type="text/javascript" src="js/loginCtrl.js"></script>
</body>
</html>
if i add mdb.min.css the routing page is not visible in ng-view.but if i remove mdb.min.css the page is visible without styling
Try using the CDN by adding it to the head tags of your root index.html of your angular app like this.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
If it doesn't work please make your issue more elaborate.
I just finished an angular app and would like to deploy it to a web server. I'm actually looking for a free solution for now. I'm using
http-server to launch my app so I don't have any other setup such as grunt or yeoman. I thought I could upload the files to my apache server but it shows blank.
This is how my file directory look. index.html
<!doctype html>
<html lang="en" ng-app="musicSearch">
<head>
<meta charset="utf-8">
<title>Angular App</title>
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.2/angular-resource.min.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet/less" type="text/css" href="assets/styles/style.less">
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
<!-- Styles -->
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
<script src="app.js"></script>
<script src="routes.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="directives.js"></script>
I want to distribute my app in two similar variants. Only the start screen of both variants is different.
What's the right pattern for this setup? I think using a index_a.html and index_b.html is a good start?!
My index.html looks like this
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>myApp</title>
<link rel="stylesheet" href="styles/application.css"/>
</head>
<body ng-controller="AppController">
<div ng-view></div>
<script src="lib/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/filters.js"></script>
<script src="scripts/directives.js"></script>
</body>
</html>
Thanks
I used 'sencha generate app' to create my Extjs mvc structure. I can't figure out where to add my custom css so that it is used in the build. In Touch, I would put it in app.json. I've looked in .sencha but can't find any obvious place. I also want it to work with my index.html while testing. Do I just put it in my index.html?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AM</title>
<link rel="stylesheet" href="resources/css/default/app.css">
<!-- Like this ? -->
<link rel="stylesheet" href="resources/MyApp.css">
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app/app.js"></script>
<!-- </x-compile> -->
</head>
<body></body>
</html>
Thanks!
In the <HEAD> section is where you will put your CSS Style Sheets and SCRIPT tags in general.
It is recommended to put your <SCRIPT> tags at the bottom of the page (before </body>) because the page don't load the rest of the page until the script have finished loading.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AM</title>
<link rel="stylesheet" href="resources/css/default/app.css">
<!-- Like this ! -->
<link rel="stylesheet" href="resources/MyApp.css">
</head>
<body>
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<script src="app/app.js"></script>
</body>
</html>